https://github.com/jmarceli/storybook-addon-react-view
https://www.npmjs.com/package/storybook-addon-react-view
https://github.com/jmarceli/storybook-addon-react-view
editable-story-code interactive-code react-view storybook storybook-addon
Last synced: 6 days ago
JSON representation
https://www.npmjs.com/package/storybook-addon-react-view
- Host: GitHub
- URL: https://github.com/jmarceli/storybook-addon-react-view
- Owner: jmarceli
- License: mit
- Created: 2020-09-26T13:44:45.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2021-06-07T19:01:01.000Z (over 4 years ago)
- Last Synced: 2023-08-06T07:05:03.527Z (over 2 years ago)
- Topics: editable-story-code, interactive-code, react-view, storybook, storybook-addon
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/storybook-addon-react-view
- Size: 2.66 MB
- Stars: 1
- Watchers: 2
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Storybook Addon React View
Storybook addon which makes your story source interactive [Storybook Addon React View](https://github.com/jmarceli/storybook-addon-react-view).
Demo: https://jmarceli.github.io/storybook-addon-react-view/
Demo code: [docs-source](./docs-source)
## Installation
If you need to add it to your Storybook, you can run:
```sh
npm i -D storybook-addon-react-view
```
## Configuration
Then, add following content to [`.storybook/main.js`](https://storybook.js.org/docs/react/configure/overview#configure-your-storybook-project):
```js
module.exports = {
addons: ["storybook-addon-react-view"],
};
```
## Usage
Simple:
```jsx
import React from "react";
import { Component, ABC, myFun } from "./Component";
import { withReactView } from "storybook-addon-react-view/register";
export const ComponentStory: React.FC<{}> = () => (
{ABC}
{myFun()}
);
export default {
title: "Component",
component: Component,
decorators: [withReactView],
parameters: { useView: { scope: { Component } } },
};
```
or with `@storybook/addon-docs`:
```jsx
import React from "react";
import { Component, ABC, myFun } from "./Component";
import { withReactView } from "storybook-addon-react-view/register";
export const ComponentStory: React.FC<{}> = () => (
{ABC}
{myFun()}
);
export default {
title: "Component",
component: Component,
decorators: [withReactView],
parameters: { useView: { scope: { Component, ABC, myFun } } },
};
```
## License
[MIT](./LICENSE)
## Author
Jan Grzegorowski