Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/hamlim/react-preview-editor
A simple BYO live editor and preview for code!
https://github.com/hamlim/react-preview-editor
hooks live-coding playground preview react
Last synced: 2 months ago
JSON representation
A simple BYO live editor and preview for code!
- Host: GitHub
- URL: https://github.com/hamlim/react-preview-editor
- Owner: hamlim
- Created: 2019-02-02T03:07:09.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2022-12-09T14:42:05.000Z (about 2 years ago)
- Last Synced: 2024-10-11T20:19:49.491Z (3 months ago)
- Topics: hooks, live-coding, playground, preview, react
- Language: JavaScript
- Homepage:
- Size: 1.79 MB
- Stars: 14
- Watchers: 3
- Forks: 0
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React Preview Editor
React-Preview-Editor is a BYO live editor and preview for code. It is built on top of:
- `react-simple-code-editor`,
- `prism-react-renderer`, and
- React Hooks
## Getting Started
Take a look at the CodeSandbox here: https://codesandbox.io/s/wk69q5zv9k. To set this up locally,
add the following:
```bash
yarn add @matthamlin/react-preview-editor [email protected] [email protected]
# or
npm add @matthamlin/react-preview-editor [email protected] [email protected]
```
**Optionally** Install `@babel/standalone` to transform JSX and future JavaScript features so the
code can run within your browser.
Then import the components, and render them:
```jsx
import { Provider, Editor, Preview } from '@matthamlin/react-preview-editor'
import { transform } from '@babel/standalone'
function transformCode(code) {
return transform(code, { presets: [['stage-0', { decoratorsLegacy: true }], 'react'] }).code
}
render(
setCount(count + 1)}>Update count: {count}
);
}
render();`}
transformCode={transformCode}
>
,
)
```
## Advanced Usage
`react-preview-editor` also exposes `useEditor` and `usePreview` hooks to build custom Editor and
Preview components.
### `useEditor`
The `useEditor` hook will provide you the following:
```js
const { value, onValueChange, highlight } = useEditor({ getHighlighterProps })
```
- `value` is the current code that the user is editing
- `onValueChange` is a function that handles taking in the raw code as a string and updating the
state of the code the user has entered
- `highlight` is a function that is called with the `code` and returns a node that will be rendered
to highlight the code
By default, `highlight` will return the Highlighter component from `prism-react-renderer`
- `getHighlighterProps` is a required argument, that should return an object of props, this will be
provided to the Highlighter component returned from `highlight`
### `usePreview`
`usePreview` is an effectful hook, that will attempt to render the current code using the provided
`renderer`
```jsx
function Preview() {
usePreview({ scope: { customVariableInScope: 5 }, render })
return
}
```
- `scope` is an object of additional variables exposed within the live preview code (this is
shallowly merged with the default values documented below in Features)
- `render` is a function that calls `ReactDOM.render`, you can customize this by using the
`createRenderer` export of the package where you provide a selector for an element that is
provided to `document.querySelector`. Or you can provide a custom renderer here too.
## Features
By default, `react-preview-editor` adds the following to scope when evaluating the code to render in
the `Preview` component:
- `React`
- `Component`
- `Fragment`
- `useState`
- `useReducer`
- `useEffect`
- `useMemo`
- `useCallback`
- `useContext`
- Other values can be added to scope by providing an object to the `scope` prop on the Provider
component