https://github.com/VAGAScom/react-describe
An accessible React playground on top of react-docgen
https://github.com/VAGAScom/react-describe
accessibility editor javascript library playground react
Last synced: 11 months ago
JSON representation
An accessible React playground on top of react-docgen
- Host: GitHub
- URL: https://github.com/VAGAScom/react-describe
- Owner: VAGAScom
- License: mit
- Archived: true
- Created: 2019-07-23T18:52:42.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2019-08-06T22:17:58.000Z (almost 7 years ago)
- Last Synced: 2024-04-10T08:36:50.088Z (about 2 years ago)
- Topics: accessibility, editor, javascript, library, playground, react
- Language: JavaScript
- Homepage: https://cw9b8.codesandbox.io/
- Size: 188 KB
- Stars: 10
- Watchers: 1
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React Describe
`React Describe` generates a component playground with editable prop values and a live preview that you can include in your own docs.
| Table of Contents |
| :-------------------------------------- |
| [Runnable examples](#runnable-examples) |
| [Installation](#installation) |
| [Usage](#usage) |
| [Licensing](#licensing) |
## Runnable examples
- [Basic](https://codesandbox.io/s/react-describe-example-cw9b8)
- [Gatsby](https://codesandbox.io/s/react-describe-gatsby-example-6x1qw)
## Installation
with Yarn:
```bash
yarn add react-describe
```
with npm:
```bash
npm install react-describe
```
## Usage
- Define `propTypes` and `defaultProps` for your component props
- Add a comment above each prop to describe it
```js
import React from "react";
import PropTypes from "prop-types";
/**
* Button description...
*/
export default function Button({ label, disabled, size, borderRadius }) {
const sizes = {
small: 32,
medium: 48,
large: 64
};
return (
{label}
);
}
Button.defaultProps = {
size: "medium",
disabled: false,
borderRadius: 0
};
Button.propTypes = {
/**
* label description...
*/
label: PropTypes.string.isRequired,
/**
* disabled description...
*/
disabled: PropTypes.bool,
/**
* size description...
*/
size: PropTypes.oneOf(["small", "medium", "large"]),
/**
* borderRadius description...
*/
borderRadius: PropTypes.number
};
```
- Import `react-describe`
- Import your component and place it as child of `Describe`
- Import your component as a string and pass it to `src`
```js
import React from "react";
import ReactDOM from "react-dom";
import { Describe } from "react-describe";
import Button from "./Button";
import RawButton from "!raw-loader!./Button.js";
function App() {
return (
{state => }
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(, rootElement);
```
- You can provide an initial state to override default prop values
```js
{state => }
```
### Available playground inputs
| PropType | input |
| :------- | ------------------ |
| string | text input |
| number | number input |
| bool | checkbox |
| oneOf | radio-button group |
## Licensing
React Describe is licensed under the [MIT License](LICENSE)