| 1 | <div align="center" markdown="1">
|
| 2 |
|
| 3 | <img src="https://d3vv6lp55qjaqc.cloudfront.net/items/061f0A2n1B0H3p0T1p1f/react-styleguidist-logo.png" alt="React Styleguidist" width="400">
|
| 4 |
|
| 5 | **Isolated React component development environment with a living style guide**
|
| 6 |
|
| 7 | [](https://travis-ci.org/styleguidist/react-styleguidist) [](https://www.npmjs.com/package/react-styleguidist) [](https://gitter.im/styleguidist/styleguidist?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) [](https://codecov.io/gh/styleguidist/react-styleguidist) [](https://www.codetriage.com/styleguidist/react-styleguidist)
|
| 8 |
|
| 9 | </div>
|
| 10 |
|
| 11 | React Styleguidist is a component development environment with hot reloaded dev server and a living style guide that you can share with your team. It lists component `propTypes` and shows live, editable usage examples based on Markdown files. Check out [**the demo style guide**](https://react-styleguidist.js.org/examples/basic/).
|
| 12 |
|
| 13 | 
|
| 14 |
|
| 15 | ## Usage
|
| 16 |
|
| 17 | - **[Getting Started](https://react-styleguidist.js.org/docs/getting-started.html): install and run Styleguidist**
|
| 18 | - [Documenting components](https://react-styleguidist.js.org/docs/documenting.html): how to write documentation
|
| 19 | - [Locating components](https://react-styleguidist.js.org/docs/components.html): point Styleguidist to your React components
|
| 20 | - [Configuring webpack](https://react-styleguidist.js.org/docs/webpack.html): tell Styleguidist how to load your code
|
| 21 | - [Cookbook](https://react-styleguidist.js.org/docs/cookbook.html): how to solve common tasks with Styleguidist
|
| 22 |
|
| 23 | ## Advanced documentation
|
| 24 |
|
| 25 | - [Configuration](https://react-styleguidist.js.org/docs/configuration.html)
|
| 26 | - [CLI commands and options](https://react-styleguidist.js.org/docs/cli.html)
|
| 27 | - [Node.js API](https://react-styleguidist.js.org/docs/api.html)
|
| 28 |
|
| 29 | ## Examples
|
| 30 |
|
| 31 | - [Basic style guide](https://react-styleguidist.js.org/examples/basic/), [source](./examples/basic)
|
| 32 | - Style guide with sections, [source](./examples/sections)
|
| 33 | - Style guide with customized styles, [source](./examples/customised)
|
| 34 | - Style guide with custom express endpoints, [source](./examples/express)
|
| 35 | - Create React App integration, [source](./examples/cra)
|
| 36 |
|
| 37 | ## Showcase
|
| 38 |
|
| 39 | Real projects using React Styleguidist:
|
| 40 |
|
| 41 | - [Rumble Charts](https://rumble-charts.github.io/rumble-charts/)
|
| 42 | - [better-react-spinkit](http://better-react-spinkit.benjamintatum.com/)
|
| 43 | - [Semantic UI Components for React](https://hallister.github.io/semantic-react/)
|
| 44 | - [Dialog Components](https://dialogs.github.io/dialog-web-components/)
|
| 45 | - [Bulma Components](https://bokuweb.github.io/re-bulma/)
|
| 46 | - [Yammer Components](https://microsoft.github.io/YamUI/)
|
| 47 | - [More projects…](https://github.com/styleguidist/react-styleguidist/issues/127)
|
| 48 |
|
| 49 | ## Integration with other tools
|
| 50 |
|
| 51 | - Create React App — supported out of the box, see the [Getting Started](https://react-styleguidist.js.org/docs/getting-started.html) guide
|
| 52 | - Create React App + TypeScript, see [Configuring webpack](https://react-styleguidist.js.org/docs/webpack.html)
|
| 53 | - TypeScript, see [react-docgen-typescript](https://github.com/styleguidist/react-docgen-typescript)
|
| 54 | - Vue, see [Vue Styleguidist](https://github.com/vue-styleguidist/vue-styleguidist)
|
| 55 |
|
| 56 | ## Third-party tools
|
| 57 |
|
| 58 | - [snapguidist](https://github.com/styleguidist/snapguidist): snapshot testing for React Styleguidist
|
| 59 | - [react-styleguidist-visual](https://github.com/unindented/react-styleguidist-visual): automated visual testing for React Styleguidist, using Puppeteer and pixelmatch
|
| 60 | - [styleguidist-scrapper](https://github.com/livechat/styleguidist-scrapper): scrapper script for documentation generated by React Styleguidist
|
| 61 |
|
| 62 | ## Resources
|
| 63 |
|
| 64 | - [The Dream of Styleguide Driven Development](https://www.youtube.com/watch?v=JjXnmhNW8Cs) talk by [Sara Vieira](https://github.com/saravieira)
|
| 65 | - [Building React Components Library](https://skillsmatter.com/skillscasts/8140-building-react-components-library) talk by [Robert Haritonov](https://github.com/operatino)
|
| 66 | - [Say Cheese: Snapshots and Visual Testing](https://developers.livechatinc.com/blog/snapshots-visual-testing/)
|
| 67 | - [Interview with Artem Sapegin](https://survivejs.com/blog/styleguidist-interview/) about React Styleguidist.
|
| 68 |
|
| 69 | ## Change log
|
| 70 |
|
| 71 | The change log can be found on the [Releases page](https://github.com/styleguidist/react-styleguidist/releases).
|
| 72 |
|
| 73 | ## Contributing
|
| 74 |
|
| 75 | Everyone is welcome to contribute. Please take a moment to read the [contributing guidelines](.github/Contributing.md) and the [developer guide](https://react-styleguidist.js.org/docs/development.html).
|
| 76 |
|
| 77 | ## Sponsoring
|
| 78 |
|
| 79 | [Become a sponsor](https://opencollective.com/styleguidist#sponsor) and get your logo on our Readme on GitHub with a link to your site.
|
| 80 |
|
| 81 |
|
| 82 | <a href="https://opencollective.com/styleguidist/sponsor/0/website" target="_blank"><img src="https://opencollective.com/styleguidist/sponsor/0/avatar.svg"></a>
|
| 83 | <a href="https://opencollective.com/styleguidist/sponsor/1/website" target="_blank"><img src="https://opencollective.com/styleguidist/sponsor/1/avatar.svg"></a>
|
| 84 | <a href="https://opencollective.com/styleguidist/sponsor/2/website" target="_blank"><img src="https://opencollective.com/styleguidist/sponsor/2/avatar.svg"></a>
|
| 85 | <a href="https://opencollective.com/styleguidist/sponsor/3/website" target="_blank"><img src="https://opencollective.com/styleguidist/sponsor/3/avatar.svg"></a>
|
| 86 | <a href="https://opencollective.com/styleguidist/sponsor/4/website" target="_blank"><img src="https://opencollective.com/styleguidist/sponsor/4/avatar.svg"></a>
|
| 87 | <a href="https://opencollective.com/styleguidist/sponsor/5/website" target="_blank"><img src="https://opencollective.com/styleguidist/sponsor/5/avatar.svg"></a>
|
| 88 | <a href="https://opencollective.com/styleguidist/sponsor/6/website" target="_blank"><img src="https://opencollective.com/styleguidist/sponsor/6/avatar.svg"></a>
|
| 89 | <a href="https://opencollective.com/styleguidist/sponsor/7/website" target="_blank"><img src="https://opencollective.com/styleguidist/sponsor/7/avatar.svg"></a>
|
| 90 | <a href="https://opencollective.com/styleguidist/sponsor/8/website" target="_blank"><img src="https://opencollective.com/styleguidist/sponsor/8/avatar.svg"></a>
|
| 91 | <a href="https://opencollective.com/styleguidist/sponsor/9/website" target="_blank"><img src="https://opencollective.com/styleguidist/sponsor/9/avatar.svg"></a>
|
| 92 | <a href="https://opencollective.com/styleguidist/sponsor/10/website" target="_blank"><img src="https://opencollective.com/styleguidist/sponsor/10/avatar.svg"></a>
|
| 93 | <a href="https://opencollective.com/styleguidist/sponsor/11/website" target="_blank"><img src="https://opencollective.com/styleguidist/sponsor/11/avatar.svg"></a>
|
| 94 | <a href="https://opencollective.com/styleguidist/sponsor/12/website" target="_blank"><img src="https://opencollective.com/styleguidist/sponsor/12/avatar.svg"></a>
|
| 95 | <a href="https://opencollective.com/styleguidist/sponsor/13/website" target="_blank"><img src="https://opencollective.com/styleguidist/sponsor/13/avatar.svg"></a>
|
| 96 | <a href="https://opencollective.com/styleguidist/sponsor/14/website" target="_blank"><img src="https://opencollective.com/styleguidist/sponsor/14/avatar.svg"></a>
|
| 97 | <a href="https://opencollective.com/styleguidist/sponsor/15/website" target="_blank"><img src="https://opencollective.com/styleguidist/sponsor/15/avatar.svg"></a>
|
| 98 | <a href="https://opencollective.com/styleguidist/sponsor/16/website" target="_blank"><img src="https://opencollective.com/styleguidist/sponsor/16/avatar.svg"></a>
|
| 99 | <a href="https://opencollective.com/styleguidist/sponsor/17/website" target="_blank"><img src="https://opencollective.com/styleguidist/sponsor/17/avatar.svg"></a>
|
| 100 | <a href="https://opencollective.com/styleguidist/sponsor/18/website" target="_blank"><img src="https://opencollective.com/styleguidist/sponsor/18/avatar.svg"></a>
|
| 101 | <a href="https://opencollective.com/styleguidist/sponsor/19/website" target="_blank"><img src="https://opencollective.com/styleguidist/sponsor/19/avatar.svg"></a>
|
| 102 | <a href="https://opencollective.com/styleguidist/sponsor/20/website" target="_blank"><img src="https://opencollective.com/styleguidist/sponsor/20/avatar.svg"></a>
|
| 103 | <a href="https://opencollective.com/styleguidist/sponsor/21/website" target="_blank"><img src="https://opencollective.com/styleguidist/sponsor/21/avatar.svg"></a>
|
| 104 | <a href="https://opencollective.com/styleguidist/sponsor/22/website" target="_blank"><img src="https://opencollective.com/styleguidist/sponsor/22/avatar.svg"></a>
|
| 105 | <a href="https://opencollective.com/styleguidist/sponsor/23/website" target="_blank"><img src="https://opencollective.com/styleguidist/sponsor/23/avatar.svg"></a>
|
| 106 | <a href="https://opencollective.com/styleguidist/sponsor/24/website" target="_blank"><img src="https://opencollective.com/styleguidist/sponsor/24/avatar.svg"></a>
|
| 107 | <a href="https://opencollective.com/styleguidist/sponsor/25/website" target="_blank"><img src="https://opencollective.com/styleguidist/sponsor/25/avatar.svg"></a>
|
| 108 | <a href="https://opencollective.com/styleguidist/sponsor/26/website" target="_blank"><img src="https://opencollective.com/styleguidist/sponsor/26/avatar.svg"></a>
|
| 109 | <a href="https://opencollective.com/styleguidist/sponsor/27/website" target="_blank"><img src="https://opencollective.com/styleguidist/sponsor/27/avatar.svg"></a>
|
| 110 | <a href="https://opencollective.com/styleguidist/sponsor/28/website" target="_blank"><img src="https://opencollective.com/styleguidist/sponsor/28/avatar.svg"></a>
|
| 111 | <a href="https://opencollective.com/styleguidist/sponsor/29/website" target="_blank"><img src="https://opencollective.com/styleguidist/sponsor/29/avatar.svg"></a>
|
| 112 |
|
| 113 | [Become a backer](https://opencollective.com/styleguidist#backer) get your image on our Readme on GitHub with a link to your site.
|
| 114 |
|
| 115 |
|
| 116 | <a href="https://opencollective.com/styleguidist/backer/0/website" target="_blank"><img src="https://opencollective.com/styleguidist/backer/0/avatar.svg"></a>
|
| 117 | <a href="https://opencollective.com/styleguidist/backer/1/website" target="_blank"><img src="https://opencollective.com/styleguidist/backer/1/avatar.svg"></a>
|
| 118 | <a href="https://opencollective.com/styleguidist/backer/2/website" target="_blank"><img src="https://opencollective.com/styleguidist/backer/2/avatar.svg"></a>
|
| 119 | <a href="https://opencollective.com/styleguidist/backer/3/website" target="_blank"><img src="https://opencollective.com/styleguidist/backer/3/avatar.svg"></a>
|
| 120 | <a href="https://opencollective.com/styleguidist/backer/4/website" target="_blank"><img src="https://opencollective.com/styleguidist/backer/4/avatar.svg"></a>
|
| 121 | <a href="https://opencollective.com/styleguidist/backer/5/website" target="_blank"><img src="https://opencollective.com/styleguidist/backer/5/avatar.svg"></a>
|
| 122 | <a href="https://opencollective.com/styleguidist/backer/6/website" target="_blank"><img src="https://opencollective.com/styleguidist/backer/6/avatar.svg"></a>
|
| 123 | <a href="https://opencollective.com/styleguidist/backer/7/website" target="_blank"><img src="https://opencollective.com/styleguidist/backer/7/avatar.svg"></a>
|
| 124 | <a href="https://opencollective.com/styleguidist/backer/8/website" target="_blank"><img src="https://opencollective.com/styleguidist/backer/8/avatar.svg"></a>
|
| 125 | <a href="https://opencollective.com/styleguidist/backer/9/website" target="_blank"><img src="https://opencollective.com/styleguidist/backer/9/avatar.svg"></a>
|
| 126 | <a href="https://opencollective.com/styleguidist/backer/10/website" target="_blank"><img src="https://opencollective.com/styleguidist/backer/10/avatar.svg"></a>
|
| 127 | <a href="https://opencollective.com/styleguidist/backer/11/website" target="_blank"><img src="https://opencollective.com/styleguidist/backer/11/avatar.svg"></a>
|
| 128 | <a href="https://opencollective.com/styleguidist/backer/12/website" target="_blank"><img src="https://opencollective.com/styleguidist/backer/12/avatar.svg"></a>
|
| 129 | <a href="https://opencollective.com/styleguidist/backer/13/website" target="_blank"><img src="https://opencollective.com/styleguidist/backer/13/avatar.svg"></a>
|
| 130 | <a href="https://opencollective.com/styleguidist/backer/14/website" target="_blank"><img src="https://opencollective.com/styleguidist/backer/14/avatar.svg"></a>
|
| 131 | <a href="https://opencollective.com/styleguidist/backer/15/website" target="_blank"><img src="https://opencollective.com/styleguidist/backer/15/avatar.svg"></a>
|
| 132 | <a href="https://opencollective.com/styleguidist/backer/16/website" target="_blank"><img src="https://opencollective.com/styleguidist/backer/16/avatar.svg"></a>
|
| 133 | <a href="https://opencollective.com/styleguidist/backer/17/website" target="_blank"><img src="https://opencollective.com/styleguidist/backer/17/avatar.svg"></a>
|
| 134 | <a href="https://opencollective.com/styleguidist/backer/18/website" target="_blank"><img src="https://opencollective.com/styleguidist/backer/18/avatar.svg"></a>
|
| 135 | <a href="https://opencollective.com/styleguidist/backer/19/website" target="_blank"><img src="https://opencollective.com/styleguidist/backer/19/avatar.svg"></a>
|
| 136 | <a href="https://opencollective.com/styleguidist/backer/20/website" target="_blank"><img src="https://opencollective.com/styleguidist/backer/20/avatar.svg"></a>
|
| 137 | <a href="https://opencollective.com/styleguidist/backer/21/website" target="_blank"><img src="https://opencollective.com/styleguidist/backer/21/avatar.svg"></a>
|
| 138 | <a href="https://opencollective.com/styleguidist/backer/22/website" target="_blank"><img src="https://opencollective.com/styleguidist/backer/22/avatar.svg"></a>
|
| 139 | <a href="https://opencollective.com/styleguidist/backer/23/website" target="_blank"><img src="https://opencollective.com/styleguidist/backer/23/avatar.svg"></a>
|
| 140 | <a href="https://opencollective.com/styleguidist/backer/24/website" target="_blank"><img src="https://opencollective.com/styleguidist/backer/24/avatar.svg"></a>
|
| 141 | <a href="https://opencollective.com/styleguidist/backer/25/website" target="_blank"><img src="https://opencollective.com/styleguidist/backer/25/avatar.svg"></a>
|
| 142 | <a href="https://opencollective.com/styleguidist/backer/26/website" target="_blank"><img src="https://opencollective.com/styleguidist/backer/26/avatar.svg"></a>
|
| 143 | <a href="https://opencollective.com/styleguidist/backer/27/website" target="_blank"><img src="https://opencollective.com/styleguidist/backer/27/avatar.svg"></a>
|
| 144 | <a href="https://opencollective.com/styleguidist/backer/28/website" target="_blank"><img src="https://opencollective.com/styleguidist/backer/28/avatar.svg"></a>
|
| 145 | <a href="https://opencollective.com/styleguidist/backer/29/website" target="_blank"><img src="https://opencollective.com/styleguidist/backer/29/avatar.svg"></a>
|
| 146 |
|
| 147 | ## Authors and license
|
| 148 |
|
| 149 | [Artem Sapegin](http://sapegin.me) and [contributors](https://github.com/styleguidist/react-styleguidist/graphs/contributors).
|
| 150 |
|
| 151 | Logo by [Sara Vieira](https://github.com/SaraVieira) and [Andrey Okonetchnikov](https://github.com/okonet).
|
| 152 |
|
| 153 | MIT License, see the included [License.md](License.md) file.
|