Skip to content

Commit 697c272

Browse files
carloskelly13carloskelly13
committed
Apply Prettier to docs content.
1 parent 7b1f4b3 commit 697c272

File tree

4 files changed

+35
-33
lines changed

4 files changed

+35
-33
lines changed

‎docs/api.md‎

Lines changed: 28 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -4,20 +4,20 @@ sidebar_position: 4
44

55
# API
66

7-
### <LiveProvider />
7+
### `<LiveProvider />`
88

99
This component provides the `context` for all the other ones. It also transpiles the user’s code!
1010
It supports these props, while passing any others through to the `children`:
1111

12-
| Name | PropType | Description |
13-
| ------------- | ---------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
14-
| code | PropTypes.string | The code that should be rendered, apart from the user’s edits |
15-
| scope | PropTypes.object | Accepts custom globals that the `code` can use |
16-
| noInline | PropTypes.bool | Doesn’t evaluate and mount the inline code (Default: `false`). Note: when using `noInline` whatever code you write must be a single expression (function, class component or some `jsx`) that can be returned immediately. If you'd like to render multiple components, use `noInline={true}` |
17-
| transformCode | PropTypes.func | Accepts and returns the code to be transpiled, affording an opportunity to first transform it |
18-
| language | PropTypes.string | What language you're writing for correct syntax highlighting. (Default: `jsx`) |
19-
| disabled | PropTypes.bool | Disable editing on the `<LiveEditor />` (Default: `false`) |
20-
| theme | PropTypes.object | A `prism-react-renderer` theme object. See more [here](https://github.com/FormidableLabs/prism-react-renderer#theming) |
12+
| Name | PropType | Description |
13+
| ------------- | ------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
14+
| code | `PropTypes.string` | The code that should be rendered, apart from the user’s edits |
15+
| scope | `PropTypes.object` | Accepts custom globals that the `code` can use |
16+
| noInline | `PropTypes.bool` | Doesn’t evaluate and mount the inline code (Default: `false`). Note: when using `noInline` whatever code you write must be a single expression (function, class component or some `jsx`) that can be returned immediately. If you'd like to render multiple components, use `noInline={true}` |
17+
| transformCode | `PropTypes.func` | Accepts and returns the code to be transpiled, affording an opportunity to first transform it |
18+
| language | `PropTypes.string` | What language you're writing for correct syntax highlighting. (Default: `jsx`) |
19+
| disabled | `PropTypes.bool` | Disable editing on the `<LiveEditor />` (Default: `false`) |
20+
| theme | `PropTypes.object` | A `prism-react-renderer` theme object. See more [here](https://github.com/FormidableLabs/prism-react-renderer#theming) |
2121

2222
All subsequent components must be rendered inside a provider, since they communicate
2323
using one.
@@ -26,31 +26,31 @@ The `noInline` option kicks the Provider into a different mode, where you can wr
2626
code and nothing gets evaluated and mounted automatically. Your example will need to call `render`
2727
with valid JSX elements.
2828

29-
### &lt;LiveEditor /&gt;
29+
### `<LiveEditor />`
3030

3131
This component renders the editor that displays the code. It is a wrapper around [`react-simple-code-editor`](https://github.com/satya164/react-simple-code-editor) and the code highlighted using [`prism-react-renderer`](https://github.com/FormidableLabs/prism-react-renderer).
3232

33-
| Name | PropType | Description |
34-
| ------- | ----------------------------------------- | ----------------------------------------------------------------- |
35-
| style | PropTypes.object | Allows overriding default styles on the `LiveEditor` component. |
36-
| tabMode | PropTypes.oneOf(["indentation", "focus"]) | Sets how you want the tab key to work. (Default: `"indentation"`) |
33+
| Name | PropType | Description |
34+
| ------- | ------------------------------------------- | ----------------------------------------------------------------- |
35+
| style | `PropTypes.object` | Allows overriding default styles on the `LiveEditor` component. |
36+
| tabMode | `PropTypes.oneOf(["indentation", "focus"])` | Sets how you want the tab key to work. (Default: `"indentation"`) |
3737

38-
### &lt;LiveError /&gt;
38+
### `<LiveError />`
3939

4040
This component renders any error that occur while executing the code, or transpiling it.
4141
It passes through any props to a `pre`.
4242

4343
> Note: Right now when the component unmounts, when there’s no error to be shown.
4444
45-
### &lt;LivePreview /&gt;
45+
### `<LivePreview />`
4646

4747
This component renders the actual component that the code generates inside an error boundary.
4848

49-
| Name | PropType | Description |
50-
| --------- | -------------- | ------------------------------------------------------- |
51-
| Component | PropTypes.node | Element that wraps the generated code. (Default: `div`) |
49+
| Name | PropType | Description |
50+
| --------- | ---------------- | ------------------------------------------------------- |
51+
| Component | `PropTypes.node` | Element that wraps the generated code. (Default: `div`) |
5252

53-
### withLive
53+
### `withLive()`
5454

5555
The `withLive` method creates a higher-order component, that injects the live-editing props provided
5656
by `LiveProvider` into a component.
@@ -60,13 +60,12 @@ desired behavior.
6060

6161
The component wrapped with `withLive` gets injected the following props:
6262

63-
| Name | PropType | Description |
64-
| -------- | ---------------- | -------------------------------------------------------------------------------------- |
65-
| code | PropTypes.string | Reflects the code that is passed in as the `code` prop |
66-
| error | PropTypes.string | An error that the code has thrown when it was previewed |
67-
| onError | PropTypes.func | A callback that, when called, changes the error to what's passed as the first argument |
68-
| onChange | PropTypes.func | A callback that accepts new code and transpiles it |
69-
| element | React.Element | The result of the transpiled code that is previewed |
63+
| Name | PropType | Description |
64+
| -------- | ------------------ | -------------------------------------------------------------------------------------- |
65+
| code | `PropTypes.string` | Reflects the code that is passed in as the `code` prop |
66+
| error | `PropTypes.string` | An error that the code has thrown when it was previewed |
67+
| onError | `PropTypes.func` | A callback that, when called, changes the error to what's passed as the first argument |
68+
| onChange | `PropTypes.func` | A callback that accepts new code and transpiles it |
69+
| element | `React.Element` | The result of the transpiled code that is previewed |
7070

7171
> Note: The code prop doesn't reflect the up-to-date code, but the `code` prop, that is passed to the `LiveProvider`.
72-

‎docs/introduction.mdx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,9 @@ import { DemoLiveEditor } from "../website/src/components/live-edit";
77

88
# Introduction
99

10-
**React Live** brings you the ability to render React components with editable source code and live preview. React Live is structured modularly and lets you style and compose its components freely. The following demos show typical use cases including the editor, preview, and error pane components. To see React Live in action make changes to the following editor panes below.
10+
**React Live** brings you the ability to render React components with editable source code and live preview. React Live is structured modularly and lets you style and compose its components freely. The following demos show typical use cases including the editor, preview, and error pane components.
11+
12+
To see React Live in action, make changes to the following editor panes:
1113

1214
### Inline Demo
1315

‎docs/usage.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -87,6 +87,6 @@ This means that while you may be used to destructuring `useState` when importing
8787
<p>{`${likes} likes`}</p>
8888
<button onClick={() => increaseLikes(likes + 1)}>Like</button>
8989
</>
90-
)
91-
}
90+
);
91+
};
9292
```

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,8 @@
1919
"lint": "eslint --config .eslintrc \"./**/*.js\"",
2020
"install:docs": "yarn --cwd website install",
2121
"start:docs": "yarn --cwd website start",
22-
"build:docs": "yarn --cwd website build"
22+
"build:docs": "yarn --cwd website build",
23+
"format:docs": "prettier --write docs"
2324
},
2425
"dependencies": {
2526
"prism-react-renderer": "^1.3.1",

0 commit comments

Comments
 (0)