From d46e34800cd89f426a411d4eb68b89a9e1a982b4 Mon Sep 17 00:00:00 2001 From: aej11a Date: Thu, 24 Oct 2019 17:06:04 -0400 Subject: [PATCH] Added example of a decorator in Storybook config There was previously text on this page that recommends adding decorators to the Storybook config, but doesn't show how to do that. I was confused about this at first, so when I figured it out I decided to add it to the docs. --- docs/src/pages/addons/introduction/index.md | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/docs/src/pages/addons/introduction/index.md b/docs/src/pages/addons/introduction/index.md index 7d408f202a2..c7828fa5104 100644 --- a/docs/src/pages/addons/introduction/index.md +++ b/docs/src/pages/addons/introduction/index.md @@ -94,7 +94,18 @@ storiesOf('Button', module) )); ``` -> You can call `addDecorator()` inside the story definition file as shown above. But adding it to the Storybook config file is a much better option. +You can call `addDecorator()` inside the story definition file as shown above, but **adding it to the Storybook config file is a much better option**. That would look like this in `config.js`: + +```js +import React from 'react' +import { addDecorator } from '@storybook/react'; + +const styles = { + textAlign: 'center', +}; +const CenterDecorator = storyFn =>
{storyFn()}
; +addDecorator(CenterDecorator); +``` ## 2. Native Addons