File tree Expand file tree Collapse file tree
Expand file tree Collapse file tree Original file line number Diff line number Diff line change @@ -128,6 +128,28 @@ It passes through any props to its `div` and also attaches the `.react-live-erro
128128This component renders the actual component, that the code generates, inside an error boundary.
129129It 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
133155Component Playground is a similar but different project, that builds on babel-standalone and thus
You can’t perform that action at this time.
0 commit comments