Storyhooks
Storyhooks is a super tiny tool intended to make setup and mocking easier when writing stories in Storybook for React components.
It is intended to emulate a beforeEach
/afterEach
workflow -- the didMount
function is called when the child is being mounted, and the willUnmount
function can be used to perform a teardown when the child is ready to be unmounted.
Getting started
yarn add @cognite/storyhooks
or
npm i @cognite/storyhooks
Example Usage
To make use of StoryHooks in individual stories, start by importing it at the top of the file containing them:
import StoryHooks from '@cognite/storyhooks';
Pass in components as children of the StoryHooks component. Multiple children are supported. Check out stories/index.stories.tsx
for more examples.
<StoryHooks
didMount={() => {
// This is a great place to perform setup actions, such as mocking out API calls performed by the component
sinon.stub(backend, 'fetchData').returns([{ id: 1, value: 'my data' }]);
}}
willUnmount={() => {
// This is a great place to perform teardown actions, such as:
sinon.restore();
}}
>
<MyAwesomeComponent />
<AnotherAwesomeComponent />
</StoryHooks>
Contributing
Feel free to send us a PR.
By contributing you agree to abide by the Code of Conduct.