{"id":13727098,"url":"https://github.com/uber/react-view","last_synced_at":"2025-06-11T17:40:05.998Z","repository":{"id":38856330,"uuid":"218877175","full_name":"uber/react-view","owner":"uber","description":"React View is an interactive playground, documentation and code generator for your components.","archived":false,"fork":false,"pushed_at":"2024-10-30T20:04:57.000Z","size":2349,"stargazers_count":708,"open_issues_count":24,"forks_count":39,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-05-07T22:35:11.804Z","etag":null,"topics":["code-generator","documentation","playground","react"],"latest_commit_sha":null,"homepage":"https://react-view.pages.dev","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/uber.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2019-10-31T23:20:15.000Z","updated_at":"2025-04-04T04:45:26.000Z","dependencies_parsed_at":"2024-01-06T07:55:41.936Z","dependency_job_id":"34f6d0ac-5fe1-4ab8-9d7a-a01b5060ea90","html_url":"https://github.com/uber/react-view","commit_stats":{"total_commits":139,"total_committers":10,"mean_commits":13.9,"dds":"0.29496402877697847","last_synced_commit":"1b507f532ed7c991c9a5a480ac556bc33f4b5e94"},"previous_names":[],"tags_count":20,"template":false,"template_full_name":null,"purl":"pkg:github/uber/react-view","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/uber%2Freact-view","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/uber%2Freact-view/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/uber%2Freact-view/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/uber%2Freact-view/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/uber","download_url":"https://codeload.github.com/uber/react-view/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/uber%2Freact-view/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259308162,"owners_count":22837974,"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":["code-generator","documentation","playground","react"],"created_at":"2024-08-03T01:03:39.374Z","updated_at":"2025-06-11T17:40:05.957Z","avatar_url":"https://github.com/uber.png","language":"TypeScript","readme":"\u003cp align=\"center\"\u003e\u003cimg src=\"https://user-images.githubusercontent.com/1387913/69589804-18001a80-0fa2-11ea-9af7-106ccaa5ab2b.png\" width=\"50%\"\u003e\u003cp\u003e\n\nReact View is a set of tools that aspires to close the gap between users, developers and designers of component libraries. React View aims to make documentation more interactive and useful. It utilizes already popular tools such as babel and prettier. [Read the introductory blog post](https://baseweb.design/blog/introducing-react-view).\n\n\u003cp align=\"center\"\u003e\u003cimg src=\"https://user-images.githubusercontent.com/1387913/69589789-09196800-0fa2-11ea-9485-aeb506d18fe8.gif\" width=\"75%\"\u003e\u003cp\u003e\n\n[See the example](https://react-view.pages.dev/?path=/story/view--view). [CodeSandbox](https://codesandbox.io/s/i3dbn?fontsize=14\u0026hidenavigation=1\u0026theme=dark).\n\nThere are a few ways how to use React View:\n\n- **All-in-one playground**. Import `\u003cView /\u003e`, give it the component configuration and drop it in your web documentation. This is ideal if you want to start as quickly as possible and don't need to customize anything.\n- **Build your own playground**. Import the `useView` hook and give it the component configuration. This hook handles the playground state and returns various props and callbacks that you can fit into your own UI components. React View also exports all default UI parts separately (`Editor`, `ActionButtons`, `Compiler`, `Knobs`, `Error`...) so you can reuse them. This is a great option if you want to customize some parts of the default UI (or all of it) without worrying about the rest.\n- **Live code editing only**. Sometimes it is useful to only have editable source code and live preview without the list of props. You can use `useView` for that too. Just don't give it any component configuration and don't render the `\u003cKnobs /\u003e` component. React View uses babel, so you can add additional presets and enable TypeScript.\n- **VS Code Snippets**. Leverage the component documentation to programatically generate VS Code snippets to make your developers more productive. [More information](#code-snippets).\n\n## Installation\n\n```sh\nyarn add react-view\n```\n\n## All-in-one Playground\n\n```tsx\nimport {View, PropTypes} from 'react-view';\nimport {Button} from 'your-button-component';\n\nexport default () =\u003e (\n  \u003cView\n    componentName=\"Button\"\n    props={{\n      children: {\n        value: 'Hello',\n        type: PropTypes.ReactNode,\n        description: 'Visible label.',\n      },\n      onClick: {\n        value: '() =\u003e alert(\"click\")',\n        type: PropTypes.Function,\n        description: 'Function called when button is clicked.',\n      },\n      disabled: {\n        value: false,\n        type: PropTypes.Boolean,\n        description: 'Indicates that the button is disabled',\n      },\n    }}\n    scope={{\n      Button,\n    }}\n    imports={{\n      'your-button-component': {\n        named: ['Button'],\n      },\n    }}\n  /\u003e\n);\n```\n\nThis is a basic example demonstrating the all-in-one `View` component. You need to define the component name, props, scope and imports. This example renders the gif above (except the `size` prop).\n\n## Build Your Playground\n\n**Bring your own UI**. The View component is a tiny wrapper around the `useView` hook. If you want to customize and have more control, you can use the `useView` hook directly. You can still re-use our default UI components or create your own:\n\n```tsx\nimport * as React from 'react';\nimport {Button} from 'your-button-component';\n\nimport {\n  useView,\n  Compiler,\n  Knobs,\n  Editor,\n  Error,\n  ActionButtons,\n  Placeholder,\n  PropTypes,\n} from 'react-view';\n\nexport default () =\u003e {\n  const params = useView({\n    componentName: 'Button',\n    props: {\n      children: {\n        value: 'Hello',\n        type: PropTypes.ReactNode,\n        description: 'Visible label.',\n      },\n      onClick: {\n        value: '() =\u003e alert(\"click\")',\n        type: PropTypes.Function,\n        description: 'Function called when button is clicked.',\n      },\n      disabled: {\n        value: false,\n        type: PropTypes.Boolean,\n        description: 'Indicates that the button is disabled',\n      },\n    },\n    scope: {\n      Button,\n    },\n    imports: {\n      'your-button-component': {\n        named: ['Button'],\n      },\n    },\n  });\n\n  return (\n    \u003cReact.Fragment\u003e\n      \u003cCompiler\n        {...params.compilerProps}\n        minHeight={62}\n        placeholder={Placeholder}\n      /\u003e\n      \u003cError msg={params.errorProps.msg} isPopup /\u003e\n      \u003cKnobs {...params.knobProps} /\u003e\n      \u003cEditor {...params.editorProps} /\u003e\n      \u003cError {...params.errorProps} /\u003e\n      \u003cActionButtons {...params.actions} /\u003e\n    \u003c/React.Fragment\u003e\n  );\n};\n```\n\n[See the example.](https://react-view.pages.dev/?path=/story/useview--basic)\n\n## Live Code Editing Only\n\n\u003cp align=\"center\"\u003e\u003cimg src=\"https://user-images.githubusercontent.com/1387913/69591933-3289c200-0fa9-11ea-952b-d628ace46e8a.gif\" width=\"75%\"\u003e\u003cp\u003e\n\n[See the example.](https://react-view.pages.dev/?path=/story/useview--live-code-only)\n\nIf you don't need the code generation or props documentation, you can also use React View for editing source code with a live preview.\n\n```tsx\nimport {useView, Compiler, Editor, Error} from 'react-view';\nimport presetTypescript from '@babel/preset-typescript';\n\nexport default () =\u003e {\n  const params = useView({\n    initialCode: `() =\u003e {\n      const text: string = \"Hey\";\n      return \u003ch2\u003e{text}\u003c/h2\u003e;\n    }`,\n    scope: {},\n    onUpdate: console.log,\n  });\n\n  return (\n    \u003cReact.Fragment\u003e\n      \u003cCompiler {...params.compilerProps} presets={[presetTypescript]} /\u003e\n      \u003cEditor {...params.editorProps} language=\"tsx\" /\u003e\n      \u003cError {...params.errorProps} /\u003e\n    \u003c/React.Fragment\u003e\n  );\n};\n```\n\nThis example also demonstrates how to opt-in into TypeScript support. Since we use babel as the compiler, you can simply add additional presets (`preset-react` is applied by default). If you are using additional components or dependencies, you need to pass them through `scope`.\n\nIt can also compile a naked JSX element:\n\n```tsx\n\u003ch2\u003eHey\u003c/h2\u003e\n```\n\nOr pretty much anything that can be executed after the return statement of JavaScript function:\n\n```js\n2 + 5;\n```\n\n## Code Snippets\n\nVS Code has a powerful feature called code snippets. It lets you to quickly embed and modify repetitive code. In our case, React components:\n\n\u003cp align=\"center\"\u003e\u003cimg src=\"https://user-images.githubusercontent.com/1387913/74782839-23897780-5259-11ea-98d6-77b8dbd4276b.gif\" width=\"75%\"\u003e\u003cp\u003e\n\nHowever, first you need to define these code snippets with a [special grammar](https://code.visualstudio.com/docs/editor/userdefinedsnippets#_grammar):\n\n```json\n\"Button\": {\n  \"scope\": \"javascript,javascriptreact,typescript,typescriptreact\",\n  \"prefix\": [\n   \"Button component\"\n  ],\n  \"description\": \"Base Button component.\",\n  \"body\": [\n   \"\u003cButton\",\n   \"  ${1:onClick={${2:() =\u003e alert(\"click\")}\\}}\",\n   \"  ${3:startEnhancer={${4:undefined}\\}}\",\n   \"  ${5:endEnhancer={${6:undefined}\\}}\",\n   \"  ${7:disabled}\",\n   \"  ${8:kind={${9|KIND.primary,KIND.secondary,KIND.tertiary,KIND.minimal|}\\}}\",\n   \"  ${10:size={${11|SIZE.default,SIZE.mini,SIZE.compact,SIZE.large|}\\}}\",\n   \"  ${12:shape={${13|SHAPE.default,SHAPE.pill,SHAPE.round,SHAPE.square|}\\}}\",\n   \"  ${14:isLoading}\",\n   \"  ${15:isSelected}\",\n   \"\u003e\",\n   \"  ${16:Hello}\",\n   \"\u003c/Button\u003e\"\n  ]\n}\n```\n\nThis would be normally a lot of error-prone work. Fortunately, you can auto-generate this based on the same component configuration you already use for the React View playground.\n\n```js\nimport {vscodeSnippet, PropTypes} from 'react-view';\n\nconst snippet = vscodeSnippet({\n  prefix: ['Button component'],\n  componentName: 'Button',\n  props: {\n    children: {\n      value: 'Hello',\n      type: PropTypes.ReactNode,\n      description: 'Visible label.',\n    },\n  },\n  imports: {\n    'your-button-component': {\n      named: ['Button'],\n    },\n  },\n});\n\n// then you might want to write it into a file so it can be loaded into VS Code\nfs.writeFileSync(\n  path.join(__dirname, 'components.code-snippets'),\n  JSON.stringify({Button: snippet}, undefined, ' ')\n);\n```\n\nSnippets can be used locally or bundled with an extension. Check [the documentation](https://code.visualstudio.com/docs/editor/userdefinedsnippets). Also there is an article about how we use this feature at [Base Web](https://baseweb.design/blog/vs-code-extension/).\n\n## Applications\n\nWe built this library for ourselves as a part of [baseweb.design](https://baseweb.design) documentation ([uber/baseweb](https://github.com/uber/baseweb)). We use all features of React View extensively. Our playground components are customized reusing existing Base Web components. We have implemented an entire custom playground section called [Style Overrides](https://baseweb.design/guides/understanding-overrides/) and there is also support for theming through a context provider.\n\n\u003cp align=\"center\"\u003e\u003cimg src=\"https://user-images.githubusercontent.com/1387913/69666276-d8d4d680-1040-11ea-81a6-129655828009.png\" width=\"75%\"\u003e\u003cp\u003e\n\n[See the example.](https://baseweb.design/components/rating/)\n\n## API Documentation\n\n### `useView` Arguments\n\n```js\nimport {useView, PropTypes} from 'react-view';\n```\n\nuseView accepts a configuration `object` where all values are optional:\n\n#### componentName\n\n```ts\ncomponentName?: string;\n```\n\nThe name of the primary component in the playground. It's used for the code generation and props parsing.\n\n#### imports\n\n```ts\nimports?: {\n  [key: string]: {\n    named?: string[];\n    default?: string;\n  };\n};\n```\n\nOptionally, the code generator can output import statements at the top of code editor so you can make the examples fully copy pastable. `key` represents the name of a module. Each module can have a single `default` and multiple `named` imports. For example:\n\n```js\nimports: {\n  'baseui/button': {\n    named: ['SIZE'];\n    default: Button;\n  };\n};\n```\n\nwould generate\n\n```js\nimport Button, {SIZE} from 'baseui/button';\n```\n\n#### scope\n\n```ts\nscope?: {[key: string]: any};\n```\n\nAll outside dependencies in the code editor need to be explicitly passed through the `scope`. Why? `imports` do nothing. Their only purpose is to make copy-pasting easier. React View does not include a bundler, so it can't understand ES modules. For example, if you want to use `styled` function from the `styled-components` in the code editor, you would do:\n\n```js\nimport styled from 'styled-components';\n\nuseView({scope: {styled}});\n```\n\n`React` is included by default.\n\n#### props\n\n```ts\nprops?: {[key: string]: {\n  value:  boolean | string | number | undefined;\n  type: PropTypes;\n  description: string;\n  options?: any;\n  placeholder?: string;\n  defaultValue?: boolean | string | number | undefined;\n  enumName?: string;\n  hidden?: boolean;\n  imports?: {[key: string]: {\n    named?: string[];\n    default?: string;\n  }};\n  stateful?: boolean;\n  propHook?: {\n    what: string;\n    into: string;\n  };\n  custom?: any;\n}};\n```\n\nIf you wish to use the code generation and knobs you need to define the component's API - props. Each prop can take multiple options:\n\n- `value` - The default value (initial state).\n- `type` - React View has some predefined internal types that are used to generate and parse code and should describe any React component: _String, ReactNode, Boolean, Number, Enum, Array, Object, Function, Ref, Date_ or _Custom_.\n- `description` - Displayed as a knob tooltip for the user.\n- `options` - When `type` is set to `PropTypes.Enum` you need to pass the enum through `options` so React View can generate all options (as input radio or select).\n- `enumName` - When `type` is set to `PropTypes.Enum`, you need to pass the enum name through `enumName` so the code generator knows what to output.\n- `placeholder` - A value placeholder, displayed in knobs.\n- `defaultValue` - Can be useful for `PropTypes.Enum` or `PropTypes.Boolean`. When `value` equals `defaultValue`, the prop will not be code generated. It keeps examples with set default options cleaner.\n- `hidden` - Some components have a lot of props but not all of them are that useful. You can optionally hide them from the default list of knobs. The user still can expand them via the \"Show all props\" button.\n- `imports` - Same as the top-level imports argument. However, it will add import statements only if the prop is being used and code generated. For example, there is no need to display the `enum` import if the related prop is not used (defaultValue). It keeps examples cleaner.\n- `stateful` - It detaches the prop value into an internal `React.useState` hook. This can make components like inputs interactive. [More info](https://react-view.pages.dev/?path=/story/useview--state-hook).\n- `propHook` - This works in combination with the `stateful` flag. [More info](https://react-view.pages.dev/?path=/story/useview--state-hook)\n- `custom` - When you define `customProps`, you can use this part of the configuration to pass arbitrary data.\n\n#### onUpdate\n\n```ts\nonUpdate?: (params: {code: string}) =\u003e void;\n```\n\nCalled when the source code changes.\n\n#### initialCode\n\n```ts\ninitialCode?: string;\n```\n\nYou can set an initial source code. This can be useful in combination with `onUpdate` to preserve the playground's state through the URL. React View would initially hydrate the state from the `initialCode` value but all subsequent changes will be driven by its internal state.\n\nIf you use `useView` only as the live code editor, you should always set this value to something so the user doesn't see a blank page.\n\n#### provider\n\n```ts\nprovider?: {\n  value: T;\n  parse: (astRoot: any) =\u003e T;\n  generate: (value: T, childTree: t.JSXElement) =\u003e t.JSXElement;\n  imports: [key: string]: {\n    named?: string[];\n    default?: string;\n  }\n};\n```\n\n**This is an advanced API**. It lets you build an arbitrary provider wrapper around your component. [See the example.](https://react-view.pages.dev/?path=/story/advanced--theming)\n\n- `value` - Can be anything, represents the state of provider, when `undefined` the provider is not code generated.\n- `parse` - Gives you the AST root, you should return the `value` so React View knows how to parse out the provider value out of the source code.\n- `generate` - Gives you the `value` (provider state) and inner component (as a `t.JSXElement`), you should return the AST of your provider including the inner component so React View knows how to turn the provider `value` into the source code/\n- `imports` - Same as the top-level `imports`, only displayed when the provider is being code generated (`value` is not `undefined`).\n\n#### customProps\n\n```ts\ncustomProps?: {\n  [key: string]: {\n    parse: (code: string, knobProps: any) =\u003e any;\n    generate: (value: any) =\u003e any;\n  }\n};\n```\n\n**This is an advanced API**. It lets you build your own prop/knob types and UIs. [See the example.](https://react-view.pages.dev/?path=/story/advanced--custom-prop) First, you set the `type` of your prop to `PropTypes.Custom`. Then, you can target it by its name (`key` is the prop name). For each prop, you need to define:\n\n- `parse` - Gives you the prop code and the prop configuration (a part of the props list), you should return the **value** (internal representation) of that prop.\n- `generate` - Gives you the **value**, you should return the AST of the prop so React View knows what to code generate.\n\nCustom Props are ignored by the `Knobs` UI component, so you need to always implement your UI.\n\n### `useView` Return Value\n\n`useView` is a React hook, it accepts the configuration above, handles the internal state of the playground and returns many values and callback that you can plug into our default UI components or you can build your own UIs. `useView` returns on an object with these parameters:\n\n#### compilerProps\n\n```ts\ncompilerProps: {\n  scope: {[key: string]: any};\n  code: string;\n  setError: (error: string | null) =\u003e void;\n  transformations: ((ast: t.File) =\u003e t.File)[];\n  className?: string;\n}\n```\n\nYou can pass these props into the `Compiler` component.\n\n- `scope` - Just being passed through from the input arguments.\n- `code` - Source code to compile and execute.\n- `setError` - To be called when the compilation fails.\n- `transformations` - Additional source code transformations that are made before the compilation (for example we are removing all import statements).\n\n#### knobProps\n\n```ts\nknobProps: {\n  state: {[key: string]: TProp};\n  set: (propValue: TPropValue, propName: string) =\u003e void;\n  error: TError;\n};\n```\n\nYou can pass these props into the `Knobs` component.\n\n- `state` - It has the same shape as the input `props` argument, where `value` represents the state of props.\n- `set` - To be called when a prop is changed after the user interacts with a knob.\n- `error` - An error that happened during the compilation and is related to this specific prop.\n\n#### editorProps\n\n```ts\neditorProps: {\n  code: string;\n  onChange: (code: string) =\u003e void;\n  placeholder?: string;\n  className?: string;\n};\n```\n\nYou can pass these props into the `Editor` component.\n\n- `code` - Source code to display.\n- `onChange` - To be called when the source code is changed.\n- `placeholder` - A placeholder value when `code` is empty.\n\n#### errorProps\n\nYou can pass these props into the `Error` component.\n\n```\nerrorProps: {\n  msg: string | null;\n  code?: string;\n  className?: string;\n};\n```\n\n- `msg` - Compile error messages.\n- `code` - The source code.\n\n#### actions\n\nYou can pass these props into the `ActionButtons` component.\n\n```ts\nactions: {\n  formatCode: () =\u003e void;\n  copyCode: () =\u003e void;\n  copyUrl: () =\u003e void;\n  reset: () =\u003e void;\n  updateProvider: (value: any) =\u003e void;\n};\n```\n\n- `formatCode` - Formats the source code with Prettier.\n- `copyCode` - Copies the source code into your clipboard.\n- `copyUrl` - Copies the URL into your clipboard.\n- `reset` - Resets the playground to an initial state.\n- `updateProvider` - Can be used to update the internal provider value (part of the advanced provider API).\n\n#### providerValue\n\n```ts\nproviderValue: any;\n```\n\nThe provider state. Defined only when `provider` argument is set.\n\n### `View` Component\n\n```js\nimport {View} from 'react-view';\n```\n\nThe View component is a tiny wrapper around the `useView` hook and composes all UI components into one thing. This might be an ideal solution if you do not want to visually tweak anything and just get started as quickly as possible.\n\n**`View` props are identical to the input arguments of `useView`** so see the documentation above for more details.\n\n### Default UI Components\n\nReact View exports a set of UI components so you can quickly use them with the `useView` hook. They are also used internally by the `View` component.\n\n```js\nimport {\n  ActionButtons,\n  Compiler,\n  Editor,\n  Error,\n  Knobs,\n  Placeholder,\n} from 'react-view';\n```\n\nTheir APIs almost exactly match the return parameters of `useView`. However, **there are a few additional props you can pass to some of them**:\n\n#### Compiler\n\n```ts\nminHeight?: number;\nplaceholder?: React.FC\u003c{height: number}\u003e;\npresets?: PluginItem[];\nclassName?: string;\n```\n\n- `minHeight` - To prevent the scroll jump when the component is rendered for the first time (aka the code is executed), we can pre-allocate a container with the `minHeight` (px).\n- `placeholder` - A React component to display before the first render, you can use the default `Placeholder` component (it's a spinner). It gets the `minHeight` through the `height` prop.\n- `presets` - The Compiler component uses Babel and you can add additional babel presets to enable extra syntax features like TypeScript. `preset-react` is included by default.\n- `className` - The class name passed to the root wrapper of Compiler.\n\n#### Editor\n\n```ts\nlanguage?: 'javascript' | 'jsx' | 'typescript' | 'tsx' | 'css';\nsmall?: boolean;\ntheme?: typeof lightTheme;\n['data-testid']?: string;\nclassName?: string;\n```\n\n- `language` - Syntax highlighting option. `jsx` is used by default.\n- `small` - More compact version of the editor, used as a part of the Knobs UI.\n- `theme` - prism-react-renderer's [theme](https://github.com/FormidableLabs/prism-react-renderer#theming), an internal light theme is used by default (also exported).\n- `className` - The class name passed to the root wrapper of Editor.\n\n#### Error\n\n```ts\n  isPopup?: boolean;\n  className?: string;\n```\n\n- `isPopup` - Should the component be displayed as a pop-up instead of being inlined.\n- `className` - The class name passed to the root wrapper of Error.\n\n### Other React View Exports\n\nThere are some other utilities that React View exports, mostly to help you when building your custom knobs or provider.\n\n```js\nimport {\n  useValueDebounce,\n  formatCode,\n  parse,\n  getAstJsxElement,\n  lightTheme,\n  assertUnreachable,\n} from 'react-view';\n```\n\n#### useValueDebounce\n\n```ts\n\u003cT\u003e(globalVal: T, globalSet: (val: T) =\u003e void): [T, (val: T) =\u003e void]\n```\n\nUseful when building custom knobs. Some internal React View routines can be slow. To keep all user interactions instant you should debounce your custom knobs.\n\nThis hook creates a duplicate internal state, synchronizes it with the up-stream (global) state and debounces all `set` calls (the second return parameter).\n\n#### formatCode\n\n```ts\n(code: string) =\u003e string;\n```\n\nUses Prettier to format the source code.\n\n#### parse\n\n```ts\n(code: string) =\u003e t.File;\n```\n\nTurns the source code into AST.\n\n#### getAstJsxElement\n\n```ts\n(name: string, attrs: (t.JSXAttribute | null)[], children: TJsxChild[]) =\u003e\n  t.JSXElement;\n```\n\nGenerates the AST for a JSX element.\n\n## Prior Art \u0026 Similar Projects\n\n[React Live](https://github.com/FormidableLabs/react-live). The first prototype of React View was even using react-live internally but eventually we needed a finer-grained control over the compilation process and a more flexible API. We also rely on babel and babel-parser instead of buble.\n\n[Storybook knobs](https://github.com/storybookjs/storybook/tree/master/addons/knobs). They allow you to edit component props dynamically using the Storybook UI. We use the same concept.\n\n[Playroom](https://github.com/seek-oss/playroom). Simultaneously design across a variety of themes and screen sizes, powered by JSX and your component library.\n","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fuber%2Freact-view","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fuber%2Freact-view","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fuber%2Freact-view/lists"}