https://github.com/alexanderjeurissen/use-storybook

Storybook provider / hook add-on for consuming storyContext and storyFn anywhere in the story render tree.
https://github.com/alexanderjeurissen/use-storybook

hook hooks provider react reactjs storybook storybook-addon storybookjs

Last synced: 2 months ago
JSON representation

Storybook provider / hook add-on for consuming storyContext and storyFn anywhere in the story render tree.

• Host: GitHub
• URL: https://github.com/alexanderjeurissen/use-storybook
• Owner: alexanderjeurissen
• License: mit
• Created: 2020-06-21T15:26:09.000Z (over 4 years ago)
• Default Branch: main
• Last Pushed: 2023-01-06T09:30:19.000Z (almost 2 years ago)
• Last Synced: 2024-10-01T05:41:42.113Z (3 months ago)
• Topics: hook, hooks, provider, react, reactjs, storybook, storybook-addon, storybookjs
• Language: TypeScript
• Homepage:
• Size: 499 KB
• Stars: 3
• Watchers: 3
• Forks: 1
• Open Issues: 6
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# useStorybook - provider & hook

[![Publish](https://github.com/alexanderjeurissen/use-storybook/actions/workflows/publish.yml/badge.svg)](https://github.com/alexanderjeurissen/use-storybook/actions/workflows/publish.yml)

This addon provides a decorator and hook to consume the `storyContext` and `storyFn` of the current active story anywhere in the render tree.

It's especially useful when you want to inspect the story content, or use parts of the storyContext in utility functions or event tracking.

### Installation

either with NPM or Yarn:

`yarn add @alexanderjeurissen/use-storybook`

or

`npm install --save @alexanderjeurissen/use-storybook`

### Basic usage

A HOC is provided to make hooking the provider into your stories is as seamless as possible:

Add the HOC as a decorator in `./storybook/preview.js`:

```js

import { withStoryContext } from '@alexanderjeurissen/use-storybook';

addDecorator(withStoryContext);

```

Use the provided hook anywhere in the story render tree:

```jsx

import { useStorybook } from '@alexanderjeurissen/use-storybook';

export default {

  title: "Components|my-component",

};

export const Default = () => {

  const { storyContext, storyFn } = useStorybook();

  ...

}

```

### Advanced usage

There are cases where more finegrained control is desired. Therefore in addition to the `withStoryContext` HOC, access to the underlying provider and context is possible:

####  {

  ...

  return (

    

      {storyFn()}

    

  );

});

```

This function signature is exactly what the `withStoryContext` hoc provides.

#### StoryContext

```js

import { StoryContext } from '@alexanderjeurissen/use-storybook';

addDecorator((storyFn, storyContext) => {

  ...

  return (

    

      {storyFn()}

    

  );

});

```

This provider signature is exactly what the `