react-demo-tab alternatives and similar libraries
Based on the "Miscellaneous" category.
Alternatively, view react-demo-tab alternatives based on common mentions on social networks and blogs.
-
react-joyride
Create walkthroughs and guided tours for your ReactJS apps. Now with standalone tooltips!. -
react-resizable-and-movable
Resizable and movable component for React. -
react-resizable-box
Resizable component for React. #reactjs. -
react-json-tree
React JSON Viewer Component, Extracted from redux-devtools. -
react-facebook
Facebook components like a Login button, Like, Share, Comments, Page or Embedded Post. -
react-avatar
Universal React avatar component makes it possible to generate avatars based on user information. -
react-images-uploader
React.js component for uploading images to the server. -
react-svg-buttons
Configurable animated SVG buttons for react. -
react-file-reader-input
React file input component for complete control over styling and abstraction from file reading. -
material-color-hash
Hash strings to Material UI colors. -
react-avatar-generator
Allows users to create random kaleidoscopes to be used as avatars. -
react-filter-control
The React filterbuilder component for building the filter criteria in the UI. -
react-headings
Auto-increment your HTML headings (h1, h2, etc.) for improved accessibility and SEO, no matter your component structure, while you keep full control of what's rendered. -
react-color-scroll
Change and blend new colors on the background as you scroll. -
react-pagespeed-score
A React component for display a dial-type chart of PageSpeed Insights.
Get performance insights in less than 4 minutes
Do you think we are missing an alternative of react-demo-tab or a related project?
README
React DemoTab 📑
A React component to easily create demos of other components
Install
npm install react-demo-tab
Demo
Example
[](demo-tab.gif)
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 = () => <button className="btn-green">Green Button</button>;
export default ButtonGreen;`;
const demoStyle = `
.btn-green {
background-color: green;
font-size: 14px;
padding: 12px 26px;
border-radius: 6px;
}`;
const App = () => {
return (
<DemoTab code={demoCode} style={demoStyle}>
<DemoComponent />
</DemoTab>
);
};
ReactDOM.render(<App />, 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 tool
Instead of manually creating demos, automate the process with DemoTab CLI tool.
Development
Easily set up a local development environment!
Build all the examples and starts storybook server on localhost:9009:
- clone
npm install
npm start
OR
Clone this repo on your machine, navigate to its location in the terminal and run:
npm install
npm link # link your local repo to your global packages
npm run build:watch # build the files and watch for changes
Clone project repo that you wish to test with react-demo-tab library and run:
npm install
npm link react-demo-tab # link your local copy into this project's node_modules
npm start
Start coding! 🎉
Built with DemoTab
Contributing
All contributions are welcome!