Node.js API

Initialization

First, you need to initialize the API for your style guide config.

Using a JavaScript object:

import styleguidist from 'react-styleguidist'
const styleguide = styleguidist({
logger: {
warn: console.warn,
info: console.log,
debug: console.log
},
components: './lib/components/**/*.js',
webpackConfig: {
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader'
},
{
test: /\.css$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
modules: true
}
}
]
}
]
}
}
})
info

Any output is disabled by default, you may need to define your own logger.

Using a config file:

import styleguidist from 'react-styleguidist'
const styleguide = styleguidist(require('../styleguide.config.js'))

Or auto searching a config file:

import styleguidist from 'react-styleguidist'
const styleguide = styleguidist()

See all available config options.

Methods

build(callback)

Arguments

  1. callback(err, config, stats) (Function): A callback to be invoked when style guide is built:

    1. err (Object): error details.
    2. config (Object): normalized style guide config.
    3. stats (Object): webpack build stats.

Returns

(Compiler): webpack Compiler instance.

Example

import styleguidist from 'react-styleguidist'
styleguidist(require('../styleguide.config.js')).build(
(err, config) => {
if (err) {
console.log(err)
} else {
console.log('Style guide published to', config.styleguideDir)
}
}
)

server(callback)

Arguments

  1. callback(err, config) (Function): A callback to be invoked when style guide is built:

    1. err (Object): error details.
    2. config (Object): normalized style guide config.

Returns

(Object): Object containing a webpack Compiler instance and the React Styleguidist server

Example

import styleguidist from 'react-styleguidist'
styleguidist(require('../styleguide.config.js')).server(
(err, config) => {
if (err) {
console.log(err)
} else {
const url = `http://${config.serverHost}:${config.serverPort}`
console.log(`Listening at ${url}`)
}
}
)

makeWebpackConfig([env])

Arguments

  1. [env='production'] (String): production or development.

Returns

(Object): webpack config.

Example

// webpack.config.js
module.exports = [
{
// User webpack config
},
// note that this is requiring rsg in commonjs mode
// it does not need to access .default
require('react-styleguidist').makeWebpackConfig()
]
Edit this page