{"id":15013663,"url":"https://github.com/react-display-window/react-display-window","last_synced_at":"2025-04-12T05:43:48.596Z","repository":{"id":65483293,"uuid":"146168393","full_name":"react-display-window/react-display-window","owner":"react-display-window","description":"A simple tool to showcase react components","archived":false,"fork":false,"pushed_at":"2020-11-26T12:11:47.000Z","size":9278,"stargazers_count":57,"open_issues_count":5,"forks_count":2,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-04-12T05:43:28.906Z","etag":null,"topics":["documentation","mdx","react"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/react-display-window.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-08-26T09:40:25.000Z","updated_at":"2024-06-18T09:43:42.000Z","dependencies_parsed_at":"2023-01-25T11:15:40.763Z","dependency_job_id":null,"html_url":"https://github.com/react-display-window/react-display-window","commit_stats":null,"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-display-window%2Freact-display-window","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-display-window%2Freact-display-window/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-display-window%2Freact-display-window/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-display-window%2Freact-display-window/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/react-display-window","download_url":"https://codeload.github.com/react-display-window/react-display-window/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248525156,"owners_count":21118616,"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":["documentation","mdx","react"],"created_at":"2024-09-24T19:44:37.891Z","updated_at":"2025-04-12T05:43:48.571Z","avatar_url":"https://github.com/react-display-window.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\" markdown=\"1\"\u003e\n\u003cimg src=\"https://raw.githubusercontent.com/react-display-window/react-display-window/master/assets/logo-large.png\" height=\"200px\"\u003e\n\u003c/div\u003e\n\n\n# React Display Window\n\n![](assets/preview.gif)\n\nReact Display Window is a simple tool to write documentation for when having a full guide is overkill. React Display Window is therefore best suited for one component libraries or libraries where all of the components are related.\n\nIt's also very useful during the development stage of these components libraries because it allows you to see the code working and running like in a real usage environment.\n\n\n## Installation\n\nInstall it as any other dev dependency in your repo:\n\n```bash\n$ npm install --development react-display-window\n```\n\n## Usage\n\nFirst we create an `.mdx` file which would contain the documentation of the project. You can use React and markdown inside this file.\n\n```md\n// my-component.mdx\n\nimport { PlayGround, Knobs, PropsTable } from 'react-display-window/lib/components';\nimport Button from './src';\n\n# Button\n\nThis is a component that's being documented by react-display-window\n\n\n## Example\n\nThis will render the component and the code.\n\n\u003cPlayGround\u003e\n  \u003cButton category=\"primary\"\u003e\n    My button\n  \u003c/Button\u003e\n\u003c/PlayGround\u003e\n\n## Props\n\n### PropsTable\n\nThis will document all the props the component accepts.\n\n\u003cPropsTable component={Button} /\u003e\n\n### Knobs\n\nThis will render the component and some controllers to edit it's props in real time.\n\n\u003cKnobs\n  component={Button}\n  defaults={{ category: 'primary' }}\u003e\n  \u003cButton\u003e\n    My button\n  \u003c/Button\u003e\n\u003c/Knobs\u003e\n```\n\nNext, we just have to run React Display Window and point it to our file:\n\n```bash\nnpx rdw serve my-component.mdx\n```\n\nAnd that's it. You can now go to the url displayed in your console and have a look at your newly created display window for your component.\n\n![](assets/frame.png)\n\nOnce you're happy with your documentation, you can run:\n\n```bash\nnpx rdw build my-component --out-dir docs/\n```\n\nAnd this will build your documentation and make it available in the folder specified. After, you can deploy it using github pages or any other static provider.\n\n\n## Example\n\nAn example repo can be found at [Drawbotics/button](https://github.com/Drawbotics/button)\n\n\n## Components\n\n### TOC\n\nA component that will render all the headers inside the file as a table of contents with links to specific sections.\n\n```jsx\nimport { Toc } from 'react-display-window/lib/components';\n\n\u003cToc /\u003e\n```\n\n![](assets/toc.png)\n\n\n### PlayGround\n\nA component that will render `children` and will also display the code used.\n\n```jsx\nimport { PlayGround } from 'react-display-window/lib/components';\nimport MyComponent from './src';\n\n\u003cPlayGround\u003e\n  \u003cMyComponent /\u003e\n\u003c/PlayGround\u003e\n```\n\n![](assets/playground.png)\n\n\n### PropsTable\n\nA component that will render a table with all the `propTypes` the passed component accepts.\n\n```jsx\nimport { PropsTable } from 'react-display-window/lib/components';\nimport MyComponent from './src';\n\n\u003cPropsTable component={MyComponent} /\u003e\n```\n\n![](assets/propstable.png)\n\n\n### Knobs\n\nSimilar to playground in that it renders it's `children` but instead of showing the code used, it will display some controls to manipulate in real time the props that component accepts. It also takes a `defaults` props where default values for the props can be specified.\n\n```jsx\nimport { Knobs } from 'react-display-window/lib/components';\nimport MyComponent from './src';\n\n\u003cKnobs component={MyComponent} defaults={{ myProp: true }}\u003e\n  \u003cMyComponent /\u003e\n\u003c/Knobs\u003e\n```\n\n![](assets/knobs.png)\n\n\n\n## Common Patterns\n\n### Add a custom title and dependencies\n\nSince we can use React inside our doc file, adding a custom title or dependencies is as simple as installing [`react-helmet`](https://github.com/nfl/react-helmet) and using it at the top of our docs:\n\n```jsx\nimport { Helmet } from 'react-helmet';\n\n\u003cHelmet\u003e\n  \u003ctitle\u003eMy Custom Title\u003c/title\u003e\n  \u003clink rel=\"stylesheet\" href=\"http://link-to/my-custom.css\" /\u003e\n\u003c/Helmet\u003e\n```\n\n## Contributing\n\nEveryone is welcome to contribute with issues, feature requests or pull requests.\n\n\n## Planned\n\n- [ ] Custom themes\n- [ ] Editable PlayGround component\n- [ ] Support for more prop types in Knobs component\n\n\n## Sponsors\n\nSponsored by:\n\n\u003ca href=\"https://www.drawbotics.com\" target=\"_blank\"\u003e\n  \u003cimg src=\"https://www.drawbotics.com/assets/press/logo/Icon-Drawbotics-Triangle-b97ecbcb97d8e7caa1f0a0a9166af407bbe9d0280e73b33b9e9ebdd23c11371b.png\" width=\"60\"\u003e\n\u003c/a\u003e\n\n## License\n\nLogo by [nicmosc](https://github.com/nicmosc)\n\n[MIT](LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freact-display-window%2Freact-display-window","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Freact-display-window%2Freact-display-window","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freact-display-window%2Freact-display-window/lists"}