Skip to content

Commit ec78da8

Browse files
jidearunoda
authored andcommitted
Document how to customize the layout
1 parent 99b260d commit ec78da8

File tree

1 file changed

+19
-0
lines changed

1 file changed

+19
-0
lines changed

docs/api.md

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -207,6 +207,25 @@ module.exports = {
207207
}
208208
```
209209

210+
### Customizing The UI
211+
212+
You can customize the UI by duplicating the original components such as [layout.js](https://raw.githubusercontent.com/kadirahq/react-storybook/master/src/client/ui/layout.js) file, put it in `.storybook/layout.js` and setting webpack config like this :
213+
214+
```js
215+
const path = require('path');
216+
217+
module.exports = {
218+
plugins: [
219+
new webpack.NormalModuleReplacementPlugin(/^\.\/layout$/, 'custom-layout')
220+
],
221+
resolve: {
222+
alias: {
223+
'custom-layout': path.resolve('.storybook/layout.js')
224+
}
225+
}
226+
}
227+
```
228+
210229
> You can pass options to this config file as you wish. But, there are some stuff like devServer we'll always add by default. <br/>
211230
> So, usually you need to use this config for doing following things:
212231
> * for loading CSS,

0 commit comments

Comments
 (0)