Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mkosir/story-tab
⚡ Create React components demos in a zap
https://github.com/mkosir/story-tab
cli code-generator demo documentation documentation-tool react
Last synced: 24 days ago
JSON representation
⚡ Create React components demos in a zap
- Host: GitHub
- URL: https://github.com/mkosir/story-tab
- Owner: mkosir
- License: mit
- Created: 2019-12-10T20:58:13.000Z (almost 5 years ago)
- Default Branch: main
- Last Pushed: 2023-02-09T16:19:36.000Z (over 1 year ago)
- Last Synced: 2024-05-19T21:20:19.573Z (4 months ago)
- Topics: cli, code-generator, demo, documentation, documentation-tool, react
- Language: TypeScript
- Homepage: https://mkosir.github.io/demozap
- Size: 18.9 MB
- Stars: 55
- Watchers: 5
- Forks: 6
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-react-components - story-tab - [demo](https://mkosir.github.io/story-tab) - CLI tool for generating component code as documentation in Storybook tab. (Dev Tools / Miscellaneous)
README
# DemoZap ⚡
[![npm version][npm-badge]][npm-url]
[![CI][build-badge]][build-url]
[![oclif][oclif-badge]][oclif-url]
[![semantic-release][semantic-badge]][semantic-url]
[![prettier][prettier-badge]][prettier-url]
[![TypeScript][typescript-badge]][typescript-url]
_Easily create demos of React components_
Maintaining example code and demo separately makes it painful, it's easy to get them out of sync 🙅
Code can't lie, documentation can 💥
DemoZap CLI keeps your code up to date with demo 💪
[](https://mkosir.github.io/demozap/?path=/story/examples--button-green-jsx-css)
## Usage
- Name component files as `[component_name].demozap.jsx`
- Run `npx demozap generate`
**Use created demos 🎉**
## [Demo 💥](https://mkosir.github.io/demozap)
## Install
React
```bash
npm install -D react-demo-tab
```
## Generated Demos
- Generated demo files are prefixed with `_`:
`MyComponent.demozap.jsx` → `_MyComponent.jsx`
- or set custom prefix:
`npx demozap generate --prefix=CustomPrefix`
## Built with DemoZap
- [React Tilt](https://github.com/mkosir/react-parallax-tilt) - [DemoZap](https://mkosir.github.io/react-parallax-tilt)
- [Mighty Mouse](https://github.com/mkosir/react-hook-mighty-mouse) - [DemoZap](https://mkosir.github.io/react-hook-mighty-mouse)
- [Magnetic Board](https://github.com/mkosir/react-magnetic-board) - [DemoZap](https://mkosir.github.io/react-magnetic-board)
## Manually create demos
To manually create demos instead via CLI use [DemoTab](https://github.com/mkosir/react-demo-tab) component.
## Contributing
All contributions are welcome!
[npm-url]: https://www.npmjs.com/package/demozap
[npm-badge]: https://img.shields.io/npm/v/demozap.svg
[build-badge]: https://github.com/mkosir/demozap/actions/workflows/main.yml/badge.svg
[build-url]: https://github.com/mkosir/demozap/actions/workflows/main.yml
[oclif-badge]: https://img.shields.io/badge/cli-oclif-brightgreen.svg
[oclif-url]: https://oclif.io
[semantic-badge]: https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg
[semantic-url]: https://github.com/semantic-release/semantic-release
[prettier-badge]: https://img.shields.io/badge/code_style-prettier-ff69b4.svg
[prettier-url]: https://github.com/prettier/prettier
[typescript-badge]: https://badges.frapsoft.com/typescript/code/typescript.svg?v=101
[typescript-url]: https://github.com/microsoft/TypeScript