https://github.com/orta/vscode-react-native-storybooks

Inline your Storybooks server in VS Code
https://github.com/orta/vscode-react-native-storybooks

Last synced: about 2 months ago
JSON representation

Inline your Storybooks server in VS Code

• Host: GitHub
• URL: https://github.com/orta/vscode-react-native-storybooks
• Owner: orta
• License: mit
• Created: 2016-09-30T12:41:58.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2021-05-29T02:45:36.000Z (over 3 years ago)
• Last Synced: 2024-02-15T01:33:29.503Z (7 months ago)
• Language: TypeScript
• Size: 2.34 MB
• Stars: 164
• Watchers: 5
• Forks: 12
• Open Issues: 12
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# React Native Storybook

Select storybooks inside your editor.

![https://github.com/orta/vscode-react-native-storybooks/raw/master/preview.gif](https://github.com/orta/vscode-react-native-storybooks/raw/master/preview.gif)

## How do I use it?

Install it, ensure that the configuration is right. You should see a new section under the files in the Explorer panel called "Storybook".

🎉

If your react-native server crashes, use the command "Reconnect Storybook to VS Code" to re-connect.

## What does it do?

-   Connect to the React Native storybooks web socket.

-   Single click a story to open it in your simulator.

-   Double click to open story in your editor.

-   Search / picker for quick story activation

## Configuration

-   `react-native-storybooks.host`: string (default: `"localhost"`)

-   `react-native-storybooks.port`: number (default: `7007`)

-   `react-native-storybooks.storyRegex`: string (default: `"**/*.story.*"`)

-   `react-native-storybooks.storybookFilterRegex`: string (default: `"."`)

You can either change these in your user settings, or per-project you can create a `.vscode/settings.json` file and add them there.

## Filtering

If you work with quite a lot of stories in a project, it can be a bit of a chore to scroll through them all, so you can use setting `react-native-storybooks.storybookFilterRegex` to filter down the shown stories. If you do this on your user settings then only you will see the changes.

You can also access the quick picker menu with:

* the `Storybook search / picker` command; or

* via shortcuts:

  * `CTRL+K S` on Windows

  * `CMD+K S` on Mac

## Known Issues

Nothing critical ATM.