Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/styleguidist/react-styleguidist
Isolated React component development environment with a living style guide
https://github.com/styleguidist/react-styleguidist
documentation hacktoberfest react styleguide
Last synced: 3 days ago
JSON representation
Isolated React component development environment with a living style guide
- Host: GitHub
- URL: https://github.com/styleguidist/react-styleguidist
- Owner: styleguidist
- License: mit
- Created: 2015-09-07T05:30:30.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2024-06-20T13:48:01.000Z (6 months ago)
- Last Synced: 2024-10-30T00:00:49.654Z (about 1 month ago)
- Topics: documentation, hacktoberfest, react, styleguide
- Language: TypeScript
- Homepage: https://react-styleguidist.js.org/
- Size: 25.2 MB
- Stars: 10,842
- Watchers: 115
- Forks: 1,437
- Open Issues: 240
-
Metadata Files:
- Readme: Readme.md
- Contributing: .github/Contributing.md
- Funding: .github/FUNDING.yml
- License: License.md
- Code of conduct: .github/Code_of_Conduct.md
Awesome Lists containing this project
- awesome-react-cn - react-styleguidist - Isolated React component development environment with a living style guide (Uncategorized / Uncategorized)
- awesome - styleguidist/react-styleguidist - Isolated React component development environment with a living style guide (TypeScript)
- awesome - react-styleguidist - Isolated React component development environment with a living style guide (JavaScript)
- awesome-react - react-styleguidist - Isolated React component development environment with a living style guide (Uncategorized / Uncategorized)
- awesome-ccamel - styleguidist/react-styleguidist - Isolated React component development environment with a living style guide (TypeScript)
- awesome-starred-test - styleguidist/react-styleguidist - Isolated React component development environment with a living style guide (TypeScript)
- awesome-learning-resources - react-styleguidist - Isolated React component development environment with a living style guide (Uncategorized / Uncategorized)
- awesome-list - react-styleguidist
- best-of-react - GitHub - 18% open Β· β±οΈ 19.01.2024): (Developer Tools)
- Resources - React Style guide
- awesome-react - react-styleguidist - Isolated React component development environment with a living style guide (**Awesome React** [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome) / React)
- StarryDivineSky - styleguidist/react-styleguidist
- awesome-react - react-styleguidist - Isolated React component development environment with a living style guide ` π 25 days ago` (React [π](#readme))
README
**Isolated React component development environment with a living style guide**
[![npm](https://img.shields.io/npm/v/react-styleguidist.svg)](https://www.npmjs.com/package/react-styleguidist) [![CI status](https://github.com/styleguidist/react-styleguidist/workflows/CI/badge.svg)](https://github.com/styleguidist/react-styleguidist.git/actions) [![Codecov](https://codecov.io/gh/styleguidist/react-styleguidist/branch/master/graph/badge.svg)](https://codecov.io/gh/styleguidist/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)
![Discord](https://img.shields.io/discord/842832186914635806?logo=discord) [![Open Source Helpers](https://www.codetriage.com/styleguidist/react-styleguidist/badges/users.svg)](https://www.codetriage.com/styleguidist/react-styleguidist)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/).
![React Styleguidist in action](https://user-images.githubusercontent.com/1703219/74945569-51c6ad00-543b-11ea-8351-f4d86860893a.gif)
[![Washing your code. A book on clean code for frontend developers](https://sapegin.me/images/washing-code-github.jpg)](https://sapegin.me/book/)
## Usage
- **[Getting Started](https://react-styleguidist.js.org/docs/getting-started): install and run Styleguidist**
- [Documenting components](https://react-styleguidist.js.org/docs/documenting): how to write documentation
- [Locating components](https://react-styleguidist.js.org/docs/components): point Styleguidist to your React components
- [Configuring webpack](https://react-styleguidist.js.org/docs/webpack): tell Styleguidist how to load your code
- [Cookbook](https://react-styleguidist.js.org/docs/cookbook): how to solve common tasks with Styleguidist## Advanced documentation
- [Configuration](https://react-styleguidist.js.org/docs/configuration)
- [CLI commands and options](https://react-styleguidist.js.org/docs/cli)
- [Node.js API](https://react-styleguidist.js.org/docs/api)## 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 β supported out of the box, see the [Getting Started](https://react-styleguidist.js.org/docs/getting-started) guide
- Vue, see [Vue Styleguidist](https://github.com/vue-styleguidist/vue-styleguidist)## 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
- [The Dream of Styleguide Driven Development](https://www.youtube.com/watch?v=JjXnmhNW8Cs) talk by [Sara Vieira](https://github.com/saravieira)
- [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.## 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).
## Sponsoring
[Become a sponsor](https://opencollective.com/styleguidist#sponsor) and get your logo on our Readme on GitHub with a link to your site.
[Become a backer](https://opencollective.com/styleguidist#backer) get your image on our Readme on GitHub with a link to your site.
## 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.