Skip to content

Commit 1b8c7c1

Browse files
committed
Add withLive and context shape to readme
1 parent a316c3c commit 1b8c7c1

1 file changed

Lines changed: 22 additions & 0 deletions

File tree

README.md

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -128,6 +128,28 @@ It passes through any props to its `div` and also attaches the `.react-live-erro
128128
This component renders the actual component, that the code generates, inside an error boundary.
129129
It passes through any props to its `div` and also attaches the `.react-live-preview` CSS class to it.
130130

131+
### withLive
132+
133+
The `withLive` method creates a higher-order component, that injects the live-editing context provided
134+
by `LiveProvider` into a component, as the `live` prop.
135+
136+
The context's shape is as follows:
137+
138+
|Name|Type|Description|
139+
|---|---|---|
140+
|code|string|Reflects the code that is passed in as the `code` prop
141+
|error|string|An error that the code has thrown when it was previewed
142+
|onError|function|A callback that, when called, changes the error to what's passed as the first argument
143+
|onChange|function|A callback that accepts new code and transpiles it
144+
|element|React.Element|The result of the transpiled code that is previewed
145+
146+
> Note: The code prop doesn't reflect the up-to-date code, but the `code` prop, that is passed to the `LiveProvider`.
147+
> This is due to the fact that the Editor is an uncontrolled input for the reason of managing the `contentEditable`
148+
> element efficiently.
149+
150+
Using this HOC allows you to add new components to react-live, or replace the default ones, with a new
151+
desired behaviour.
152+
131153
## Comparison to [component-playground](https://github.com/FormidableLabs/component-playground)
132154

133155
Component Playground is a similar but different project, that builds on babel-standalone and thus

0 commit comments

Comments
 (0)