{"library":"react-styleguidist","title":"React Styleguidist","description":"React Styleguidist is a robust tool for generating living style guides and developing React components in isolation. It provides a hot-reloaded development server where developers can view, interact with, and document components. The current stable version is 13.1.4, with recent maintenance releases addressing bug fixes and minor improvements, typically seeing several releases per year including minor versions and patches. Key differentiators include its reliance on Markdown files for component documentation, automatic listing of `propTypes`, and the ability to show live, editable usage examples. It also offers extensive configuration options for Webpack and theming, allowing deep integration into existing project setups. Unlike some alternatives, it focuses on generating a static style guide from existing components and their documentation, rather than being a visual drag-and-drop builder, promoting a documentation-driven development workflow.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-styleguidist"],"cli":{"name":"styleguidist","version":null}},"imports":["const styleguidist = require('react-styleguidist');","module.exports = { /* config */ };","const styleguidist = require('react-styleguidist')(config); styleguidist.build((err, conf) => { /* ... */ });"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"{\n  \"name\": \"my-component-library\",\n  \"version\": \"1.0.0\",\n  \"scripts\": {\n    \"styleguide\": \"styleguidist start\",\n    \"styleguide:build\": \"styleguidist build\"\n  },\n  \"dependencies\": {\n    \"react\": \">=18.0\",\n    \"react-dom\": \">=18.0\"\n  },\n  \"devDependencies\": {\n    \"react-styleguidist\": \"^13.1.4\",\n    \"babel-loader\": \"^9.0.0\",\n    \"@babel/core\": \"^7.0.0\",\n    \"@babel/preset-env\": \"^7.0.0\",\n    \"@babel/preset-react\": \"^7.0.0\"\n  }\n}\n\n// styleguide.config.js\nmodule.exports = {\n  components: 'src/components/**/*.jsx',\n  webpackConfig: {\n    module: {\n      rules: [\n        {\n          test: /\\.jsx?$/,\n          exclude: /node_modules/,\n          loader: 'babel-loader',\n          options: {\n            presets: ['@babel/preset-env', '@babel/preset-react']\n          }\n        }\n      ]\n    }\n  },\n  title: 'My Component Library Style Guide'\n};\n\n// src/components/Button/Button.jsx\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\nfunction Button({ children, onClick = () => {} }) {\n  return (\n    <button\n      style={{\n        padding: '10px 20px',\n        border: 'none',\n        borderRadius: '5px',\n        backgroundColor: '#2D9EE0',\n        color: 'white',\n        cursor: 'pointer',\n      }}\n      onClick={onClick}\n    >\n      {children}\n    </button>\n  );\n}\n\nButton.propTypes = {\n  /**\n   * Button content\n   */\n  children: PropTypes.node.isRequired,\n  /**\n   * Click handler\n   */\n  onClick: PropTypes.func,\n};\n\nexport default Button;\n\n// src/components/Button/Button.md\n```## Button\n\nA versatile button component.\n\n### Usage\n\n```jsx\n<Button onClick={() => alert('Clicked!')}>Click Me</Button>\n```\n\n```jsx\n<Button>Another Button</Button>\n```\n```","lang":"javascript","description":"This quickstart sets up a basic `react-styleguidist` project. It includes `package.json` scripts, a `styleguide.config.js` with Babel for JSX support, a simple `Button` component, and its accompanying Markdown documentation.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}