Add a new Webpack entry point. In your style guide config:
var path = require('path');
module.exports = {
// ...
updateWebpackConfig: function(webpackConfig, env) {
webpackConfig.entry.push(path.join(__dirname, 'path/to/script.js'));
webpackConfig.entry.push(path.join(__dirname, 'path/to/styles.css'));
return webpackConfig;
},
};
You may need an appropriate Webpack loader to handle these files.
Add a new Webpack entry point in your style guide config:
var path = require('path');
module.exports = {
// ...
updateWebpackConfig: function(webpackConfig, env) {
webpackConfig.entry.push(path.join(__dirname, 'lib/styleguide/styles.css'));
return webpackConfig;
},
};
Now you can change almost any piece of a style guide. For example you can change a font and a background color:
.ReactStyleguidist-common__font {
font-family: "Comic Sans MS", "Comic Sans", cursive;
}
.ReactStyleguidist-colors__base-bg {
background: hotpink;
}
Use your browser’s developer tools to find CSS class names of the elements you want to change.
You can replace any Styleguidist React component. In your style guide config:
var path = require('path');
module.exports = {
// ...
updateWebpackConfig: function(webpackConfig, env) {
webpackConfig.resolve.alias['rsg-components/StyleGuide'] = path.join(__dirname, 'lib/styleguide/StyleGuide');
return webpackConfig;
},
};
Also there are two special wrapper components. They do nothing by themselves and were made specifically to be replaced with a custom logic:
StyleGuide
— the root component of a style guide React app.Wrapper
— wraps every example component.
For example you can replace the Wrapper
component to wrap any example in the React Intl’s provider component. You can’t wrap the whole style guide because every example is compiled separately in a browser.
// styleguide.config.js
var path = require('path');
module.exports = {
// ...
updateWebpackConfig: function(webpackConfig, env) {
webpackConfig.resolve.alias['rsg-components/Wrapper'] = path.join(__dirname, 'lib/styleguide/Wrapper');
return webpackConfig;
},
};
// lib/styleguide/Wrapper.js
import React, { Component } from 'react';
import { IntlProvider } from 'react-intl';
export default class Wrapper extends Component {
render() {
return (
<IntlProvider locale="en">
{this.props.children}
</IntlProvider>
);
}
}
- Open your browser’s developer tools
- Write
debugger;
statement wherever you want: in a component source, a Markdown example or even in an editor in a browser.
- Put
debugger;
statement at the beginning of your code. - Press the button in your browser’s developer tools.
- Press the button and the debugger will stop execution at the next exception.
This occurs when you are assigning props via getDefaultProps
that are not listed within the components propTypes
.
For example, the color prop here is assigned via getDefaultProps
but missing from the propTypes
, therefore the style guide is unable to display the correct prop type.
Button.propTypes = {
children: PropTypes.string.isRequired,
size: PropTypes.oneOf(['small', 'normal', 'large']),
};
Button.defaultProps = {
color: '#333',
size: 'normal',
};
- React Styleguide Generator, a React style guide generator.
- heatpack, a quick to setup hot-reloaded development server for React components.
- Demobox, a component for making component showcases for landing pages.
- React-demo, a component for creating demos of other components with props editor.
- Atellier, a React components emulator.
- Cosmos, a tool for designing truly encapsulated React components.
- React Storybook, isolate your React UI Component development from the main app.
- React Cards, devcards for React.
- SourceJS, a platform to unify all your frontend documentation. It has a Styleguidist plugin.