react-describe
npm i react-describe

react-describe

An accessible React playground on top of react-docgen

by VAGAScom

0.1.3 (see all)License:MITTypeScript:Not Found
npm i react-describe
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.

Code example Playground example
Table of Contents
Runnable examples
Installation
Usage
Licensing

Runnable examples

Installation

with Yarn:

yarn add react-describe

with npm:

npm install react-describe

Usage

  • Define propTypes and defaultProps for your component props
  • Add a comment above each prop to describe it
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 (
    <button
      style={{
        paddingLeft: sizes[size],
        paddingRight: sizes[size],
        fontSize: sizes[size] / 2,
        height: sizes[size],
        backgroundColor: "rebeccapurple",
        color: "#fff",
        border: "none",
        borderRadius,
        opacity: disabled ? 0.5 : 1
      }}
      disabled={disabled}
    >
      {label}
    </button>
  );
}

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
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 (
    <div className="App">
      <Describe src={RawButton}>{state => <Button {...state} />}</Describe>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
  • You can provide an initial state to override default prop values
<Describe
  src={RawButton}
  initialState={{
    label: "Button",
    disabled: true,
    size: "small",
    borderRadius: 3
  }}
>
  {state => <Button {...state} />}
</Describe>

Available playground inputs

PropTypeinput
stringtext input
numbernumber input
boolcheckbox
oneOfradio-button group

Licensing

React Describe is licensed under the MIT License

Downloads/wk

3

GitHub Stars

10

LAST COMMIT

3yrs ago

MAINTAINERS

1

CONTRIBUTORS

1

OPEN ISSUES

1

OPEN PRs

0
VersionTagPublished
0.1.3
latest
3yrs ago
No alternatives found
No tutorials found
Add a tutorial