diff --git a/docs/ModConf/README.md b/docs/ModConf/README.md
index 548dc4be..fdf7f6ed 100644
--- a/docs/ModConf/README.md
+++ b/docs/ModConf/README.md
@@ -4,7 +4,7 @@
## Available libaries
-See [`libs.ts`](https://github.com/DerGoogler/MMRL/blob/master/Website/src/components/ConfigureView/libs.ts) to see all usable modules
+See [`libs.ts`](https://github.com/DerGoogler/MMRL/blob/master/Website/src/components/ModConfView/libs.ts) to see all usable modules
## Diff. between `require` and `import`
diff --git a/docs/ModConf/components/Image.md b/docs/ModConf/components/Image.md
index 4b43d921..8d13c074 100644
--- a/docs/ModConf/components/Image.md
+++ b/docs/ModConf/components/Image.md
@@ -11,14 +11,36 @@ import { Image } from "@mmrl/ui";
## Usage
```js
+import React from "react"
+import { useActivity } from "@mmrl/hooks"
+import { Image, Page, Toolbar } from "@mmrl/ui";
+
+function RenderToolbar() {
+ const { context, extra } = useActivity()
+ const { title = "Default" } = extra
+ return (
+
+
+
+
+ {title}
+
+ )
+}
+
function App() {
- // type is actually not required
- return (
-
-
-
- );
+ return (
+
+
+
+
+ Disable opening
+
+
+ );
}
+
+export default App
```
## API
diff --git a/docs/ModConf/components/Markdown.md b/docs/ModConf/components/Markdown.md
new file mode 100644
index 00000000..5f3a88cd
--- /dev/null
+++ b/docs/ModConf/components/Markdown.md
@@ -0,0 +1,51 @@
+# Image API
+
+Component to display markdown code
+
+## Setup
+
+```js
+import { Markdown } from "@mmrl/ui";
+```
+
+## Usage
+
+```js
+import React from "react"
+import { useActivity } from "@mmrl/hooks"
+import { Markdown, Page, Toolbar } from "@mmrl/ui";
+
+function RenderToolbar() {
+ const { context, extra } = useActivity()
+ const { title = "Default" } = extra
+ return (
+
+
+
+
+ {title}
+
+ )
+}
+
+function App() {
+ return (
+
+ {`
+# Heading 1
+
+Hello, world!
+ `}
+
+ );
+}
+
+export default App
+```
+
+## API
+
+| Attr | Required | Type |
+| ------------- | -------- | ----------------- |
+| `children` | Yes | `React.ReactNode` |
+| `fetch` | No | `url\|string` |
diff --git a/docs/Shell.md b/docs/ModConf/functions/Shell.md
similarity index 100%
rename from docs/Shell.md
rename to docs/ModConf/functions/Shell.md
diff --git a/docs/SuFile.md b/docs/ModConf/functions/SuFile.md
similarity index 94%
rename from docs/SuFile.md
rename to docs/ModConf/functions/SuFile.md
index 0eaf562a..acdae53b 100644
--- a/docs/SuFile.md
+++ b/docs/ModConf/functions/SuFile.md
@@ -97,3 +97,10 @@ hello.create(SuFile.NEW_FOLDER)
// create folder with parent folders
hello.create(SuFile.NEW_FOLDERS)
```
+
+## Access native methods
+
+```js
+const native = new SuFile.create("/sdcard/hello.txt")
+native.interface
+```
diff --git a/docs/ModConf/hooks/useActivity.md b/docs/ModConf/hooks/useActivity.md
index 79d23a91..18813ac4 100644
--- a/docs/ModConf/hooks/useActivity.md
+++ b/docs/ModConf/hooks/useActivity.md
@@ -17,58 +17,58 @@ import { Page, Toolbar } from "@mmrl/ui";
import { Button } from "@mui/material";
function RenderToolbar() {
- const { context, extra } = useActivity()
- const { title = "Default" } = extra
- return (
-
-
-
-
- {title}
-
- )
+ const { context, extra } = useActivity()
+ const { title = "Default" } = extra
+ return (
+
+
+
+
+ {title}
+
+ )
}
function App() {
- const { context } = useActivity();
+ const { context } = useActivity();
- const handleOpen = () => {
- context.pushPage({
- component: NewPage,
- // don't forget this!
- key: "MyNewPage",
- // if your page has props
- props: {},
- // push any object here
- extra: {
- title: "Hello",
- },
- });
- };
+ const handleOpen = () => {
+ context.pushPage({
+ component: NewPage,
+ // don't forget this!
+ key: "MyNewPage",
+ // if your page has props
+ props: {},
+ // push any object here
+ extra: {
+ title: "Hello",
+ },
+ });
+ };
- return (
-
-
-
- );
+ return (
+
+
+
+ );
}
const allowBack = false;
function NewPage() {
- return (
- {
- if (allowBack) {
- e.callParentHandler();
- }
- }}
- renderToolbar={RenderToolbar}
- >
- Try to use your back button
-
- );
+ return (
+ {
+ if (allowBack) {
+ e.callParentHandler();
+ }
+ }}
+ renderToolbar={RenderToolbar}
+ >
+ Try to use your back button
+
+ );
}
export default App
diff --git a/docs/ModConf/hooks/useStrings.md b/docs/ModConf/hooks/useStrings.md
new file mode 100644
index 00000000..db565988
--- /dev/null
+++ b/docs/ModConf/hooks/useStrings.md
@@ -0,0 +1,52 @@
+# Config Localization
+
+## Setup
+
+```js
+import { useStrings } from "@mmrl/hooks"
+import { StringsProvider } from "@mmrl/providers"
+```
+
+## Usage
+
+```jsx
+import React from "react";
+import { Page, Toolbar } from "@mmrl/ui";
+import { useStrings, useActivity } from "@mmrl/hooks"
+import { StringsProvider } from "@mmrl/providers"
+
+
+function RenderToolbar() {
+ const { context, extra } = useActivity()
+ const { title = "Default" } = extra
+ return (
+
+
+
+
+ {title}
+
+ )
+}
+
+function App() {
+ const { strings } = useStrings()
+
+ return (
+
+ {strings("hello")}
+
+ );
+}
+
+export default () => {
+ return (
+
+
+
+ )
+}
+```