Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mkosir/react-demo-tab
📑 React component to easily create demos of other components
https://github.com/mkosir/react-demo-tab
demo-tab demotab react react-demo react-demo-tab
Last synced: 26 days ago
JSON representation
📑 React component to easily create demos of other components
- Host: GitHub
- URL: https://github.com/mkosir/react-demo-tab
- Owner: mkosir
- License: mit
- Created: 2019-12-20T20:53:21.000Z (almost 5 years ago)
- Default Branch: main
- Last Pushed: 2024-11-04T14:58:46.000Z (about 1 month ago)
- Last Synced: 2024-11-04T16:47:11.754Z (about 1 month ago)
- Topics: demo-tab, demotab, react, react-demo, react-demo-tab
- Language: TypeScript
- Homepage: https://mkosir.github.io/react-demo-tab
- Size: 7.86 MB
- Stars: 41
- Watchers: 5
- Forks: 6
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-react-components - react-demo-tab - [demo](https://mkosir.github.io/react-demo-tab) - A React component to easily create demos of other components. (UI Components / Miscellaneous)
- awesome-react-components - react-demo-tab - [demo](https://mkosir.github.io/react-demo-tab) - A React component to easily create demos of other components. (UI Components / Miscellaneous)
- fucking-awesome-react-components - react-demo-tab - 🌎 [demo](mkosir.github.io/react-demo-tab) - A React component to easily create demos of other components. (UI Components / Miscellaneous)
README
# React DemoTab 📑
[![npm version][npm-badge]][npm-url]
[![CI][build-badge]][build-url]
[![semantic-release][semantic-badge]][semantic-url]
[![TypeScript][typescript-badge]][typescript-url]
_React component to easily create demos of other components_
## [Demo](https://mkosir.github.io/react-demo-tab)
## Install
```bash
npm install react-demo-tab
```
## Example
[](https://mkosir.github.io/react-demo-tab/?path=/story/examples--button-green)
```jsx
import React from 'react';
import ReactDOM from 'react-dom';
import DemoTab from 'react-demo-tab';
import DemoComponent from './ButtonGreen';
const demoCode = `
import React from 'react';
import './ButtonGreen.css';
const ButtonGreen = () => Green Button;
export default ButtonGreen;`;
const demoStyle = `
.btn-green {
background-color: green;
font-size: 14px;
padding: 12px 26px;
border-radius: 6px;
}`;
const App = () => {
return (
);
};
ReactDOM.render(, document.getElementById('root'));
```
## Props
Create demo of component that is passed as a child.
Below is the complete list of possible props and their options:
> ▶︎ indicates optional prop with default value
**code**: string
Demo code. Required.
**style**: string ▶︎ `undefined`
Demo style.
**codeExt**: 'jsx' | 'tsx' ▶︎ `jsx`
Code file extension for image to be displayed.
**styleExt**: 'css' | 'scss' ▶︎ `css`
Style file extension for image to be displayed.
## Create demos with CLI
Instead of manually creating demos, automate the process with [DemoZap CLI](https://github.com/mkosir/demozap).
## Development
_Easily set up a local development environment!_
Build project and start storybook on [localhost](http://localhost:9009):
- clone
- `npm install`
- `npm start`
**Start coding!** 🎉
## Built with DemoTab
- [React Tilt](https://github.com/mkosir/react-parallax-tilt) - [DemoTab](https://mkosir.github.io/react-parallax-tilt)
- [Mighty Mouse](https://github.com/mkosir/react-hook-mighty-mouse) - [DemoTab](https://mkosir.github.io/react-hook-mighty-mouse)
- [Magnetic Board](https://github.com/mkosir/react-magnetic-board) - [DemoTab](https://mkosir.github.io/react-magnetic-board)
## Contributing
All contributions are welcome!
[npm-url]: https://www.npmjs.com/package/react-demo-tab
[npm-badge]: https://img.shields.io/npm/v/react-demo-tab.svg
[build-badge]: https://github.com/mkosir/react-demo-tab/actions/workflows/main.yml/badge.svg
[build-url]: https://github.com/mkosir/react-demo-tab/actions/workflows/main.yml
[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
[typescript-badge]: https://badges.frapsoft.com/typescript/code/typescript.svg?v=101
[typescript-url]: https://github.com/microsoft/TypeScript