npm package: @matthieulemoine/react-styleguidist
Description: React components style guide generator
Author: Artem Sapegin
Latest version: 0.0.0-development

<div align="center" markdown="1">

<img src="https://d3vv6lp55qjaqc.cloudfront.net/items/061f0A2n1B0H3p0T1p1f/react-styleguidist-logo.png" alt="React Styleguidist" width="400">

**Isolated React component development environment with a living style guide**

[![Build Status](https://travis-ci.org/styleguidist/react-styleguidist.svg)](https://travis-ci.org/styleguidist/react-styleguidist)
[![npm](https://img.shields.io/npm/v/react-styleguidist.svg)](https://www.npmjs.com/package/react-styleguidist)
[![Join the chat at https://gitter.im/styleguidist/styleguidist](https://badges.gitter.im/styleguidist/styleguidist.svg)](https://gitter.im/styleguidist/styleguidist?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
[![Codecov](https://codecov.io/gh/styleguidist/react-styleguidist/branch/master/graph/badge.svg)](https://codecov.io/gh/styleguidist/react-styleguidist)

</div>

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/).

![](https://d3vv6lp55qjaqc.cloudfront.net/items/271B372x102S0c052i3F/react-styleguidist7.gif)

## Usage

* **[Getting Started](https://react-styleguidist.js.org/docs/getting-started.html): install and run Styleguidist**
* [Documenting components](https://react-styleguidist.js.org/docs/documenting.html): how to write documentation
* [Locating components](https://react-styleguidist.js.org/docs/components.html): point Styleguidist to your React components
* [Configuring webpack](https://react-styleguidist.js.org/docs/webpack.html): tell Styleguidist how to load your code
* [Cookbook](https://react-styleguidist.js.org/docs/cookbook.html): how to solve common tasks with Styleguidist

## Examples

* [Basic style guide](https://react-styleguidist.js.org/examples/basic/), [source](./examples/basic)
* Style guide with sections, [source](./examples/sections)
* Style guide with customized styles, [source](./examples/customised)
* Style guide with custom express endpoints, [source](./examples/express)
* Create React App integration, [source](./examples/cra)

## Showcase

Real projects using React Styleguidist:

* [Rumble Charts](https://rumble-charts.github.io/rumble-charts/)
* [better-react-spinkit](http://better-react-spinkit.benjamintatum.com/)
* [Semantic UI Components for React](https://hallister.github.io/semantic-react/)
* [Dialog Components](https://dialogs.github.io/dialog-web-components/)
* [Bulma Components](https://bokuweb.github.io/re-bulma/)
* [Yammer Components](https://microsoft.github.io/YamUI/)
* [More projects…](https://github.com/styleguidist/react-styleguidist/issues/127)

## Integration with other tools

* Create React App — just works, see the [Getting Started](https://react-styleguidist.js.org/docs/getting-started.html) guide!
* Create React App + TypeScript, see [Configuring webpack](https://react-styleguidist.js.org/docs/webpack.html)
* TypeScript, see [react-docgen-typescript](https://github.com/styleguidist/react-docgen-typescript)

## Third-party tools

* [snapguidist](https://github.com/styleguidist/snapguidist): snapshot testing for React Styleguidist
* [react-styleguidist-visual](https://github.com/unindented/react-styleguidist-visual): automated visual testing for React Styleguidist, using Puppeteer and pixelmatch
* [styleguidist-scrapper](https://github.com/livechat/styleguidist-scrapper): scrapper script for documentation generated by React Styleguidist

## Resources

* [Building React Components Library](https://skillsmatter.com/skillscasts/8140-building-react-components-library) talk by [Robert Haritonov](https://github.com/operatino)
* [Say Cheese: Snapshots and Visual Testing](https://developers.livechatinc.com/blog/snapshots-visual-testing/)
* [Interview with Artem Sapegin](https://survivejs.com/blog/styleguidist-interview/) about React Styleguidist.

## Advanced documentation

* [Configuration](https://react-styleguidist.js.org/docs/configuration.html)
* [CLI commands and options](https://react-styleguidist.js.org/docs/cli.html)
* [Node.js API](https://react-styleguidist.js.org/docs/api.html)

## Change log

The change log can be found on the [Releases page](https://github.com/styleguidist/react-styleguidist/releases).

## Contributing

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).

## Sponsor

<a target='_blank' rel='nofollow' href='https://app.codesponsor.io/link/Ehc9nFenMsMG6p9KFod8F3df/styleguidist/react-styleguidist'>
  <img alt='Sponsor' width='888' height='68' src='https://app.codesponsor.io/embed/Ehc9nFenMsMG6p9KFod8F3df/styleguidist/react-styleguidist.svg' />
</a>

## Authors and license

[Artem Sapegin](http://sapegin.me) and [contributors](https://github.com/styleguidist/react-styleguidist/graphs/contributors).

Logo by [Sara Vieira](https://github.com/SaraVieira) and [Andrey Okonetchnikov](https://github.com/okonet).

MIT License, see the included [License.md](License.md) file.