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: 2 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 (over 5 years ago)
• Default Branch: master
• Last Pushed: 2019-08-06T22:17:58.000Z (over 5 years ago)
• Last Synced: 2024-04-10T08:36:50.088Z (10 months 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)