{"id":16295778,"url":"https://github.com/hamlim/react-preview-editor","last_synced_at":"2025-03-20T04:31:07.236Z","repository":{"id":41782154,"uuid":"168788573","full_name":"hamlim/react-preview-editor","owner":"hamlim","description":"A simple BYO live editor and preview for code!","archived":false,"fork":false,"pushed_at":"2025-01-12T02:37:06.000Z","size":628,"stargazers_count":14,"open_issues_count":4,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-17T14:48:59.804Z","etag":null,"topics":["hooks","live-coding","playground","preview","react"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hamlim.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-02-02T03:07:09.000Z","updated_at":"2025-01-12T02:36:08.000Z","dependencies_parsed_at":"2023-01-25T22:01:49.375Z","dependency_job_id":null,"html_url":"https://github.com/hamlim/react-preview-editor","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hamlim%2Freact-preview-editor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hamlim%2Freact-preview-editor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hamlim%2Freact-preview-editor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hamlim%2Freact-preview-editor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hamlim","download_url":"https://codeload.github.com/hamlim/react-preview-editor/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244552283,"owners_count":20471044,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["hooks","live-coding","playground","preview","react"],"created_at":"2024-10-10T20:19:46.536Z","updated_at":"2025-03-20T04:31:06.763Z","avatar_url":"https://github.com/hamlim.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Preview Editor\n\nReact-Preview-Editor is a BYO live editor and preview for code. It is built on top of:\n\n- `react-simple-code-editor`,\n- `prism-react-renderer`, and\n- React Hooks\n\n## Getting Started\n\nTake a look at the CodeSandbox here: https://codesandbox.io/s/wk69q5zv9k. To set this up locally,\nadd the following:\n\n```bash\nyarn add @matthamlin/react-preview-editor react@16.8.0 react-dom@16.8.0\n# or\nnpm add @matthamlin/react-preview-editor react@16.8.0 react-dom@16.8.0\n```\n\n**Optionally** Install `@babel/standalone` to transform JSX and future JavaScript features so the\ncode can run within your browser.\n\nThen import the components, and render them:\n\n```jsx\nimport { Provider, Editor, Preview } from '@matthamlin/react-preview-editor'\nimport { transform } from '@babel/standalone'\n\nfunction transformCode(code) {\n  return transform(code, { presets: [['stage-0', { decoratorsLegacy: true }], 'react'] }).code\n}\n\nrender(\n  \u003cProvider\n    code={`function App() {\n  const [count, setCount] = useState(0);\n  return (\n    \u003cbutton onClick={() =\u003e setCount(count + 1)}\u003eUpdate count: {count}\u003c/button\u003e\n  );\n}\n\nrender(\u003cApp /\u003e);`}\n    transformCode={transformCode}\n  \u003e\n    \u003cPreview /\u003e\n    \u003cEditor /\u003e\n  \u003c/Provider\u003e,\n)\n```\n\n## Advanced Usage\n\n`react-preview-editor` also exposes `useEditor` and `usePreview` hooks to build custom Editor and\nPreview components.\n\n### `useEditor`\n\nThe `useEditor` hook will provide you the following:\n\n```js\nconst { value, onValueChange, highlight } = useEditor({ getHighlighterProps })\n```\n\n- `value` is the current code that the user is editing\n- `onValueChange` is a function that handles taking in the raw code as a string and updating the\n  state of the code the user has entered\n- `highlight` is a function that is called with the `code` and returns a node that will be rendered\n  to highlight the code\n\nBy default, `highlight` will return the Highlighter component from `prism-react-renderer`\n\n- `getHighlighterProps` is a required argument, that should return an object of props, this will be\n  provided to the Highlighter component returned from `highlight`\n\n### `usePreview`\n\n`usePreview` is an effectful hook, that will attempt to render the current code using the provided\n`renderer`\n\n```jsx\nfunction Preview() {\n  usePreview({ scope: { customVariableInScope: 5 }, render })\n  return \u003cdiv /\u003e\n}\n```\n\n- `scope` is an object of additional variables exposed within the live preview code (this is\n  shallowly merged with the default values documented below in Features)\n- `render` is a function that calls `ReactDOM.render`, you can customize this by using the\n  `createRenderer` export of the package where you provide a selector for an element that is\n  provided to `document.querySelector`. Or you can provide a custom renderer here too.\n\n## Features\n\nBy default, `react-preview-editor` adds the following to scope when evaluating the code to render in\nthe `Preview` component:\n\n- `React`\n- `Component`\n- `Fragment`\n- `useState`\n- `useReducer`\n- `useEffect`\n- `useMemo`\n- `useCallback`\n- `useContext`\n- Other values can be added to scope by providing an object to the `scope` prop on the Provider\n  component\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhamlim%2Freact-preview-editor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhamlim%2Freact-preview-editor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhamlim%2Freact-preview-editor/lists"}