# storybook-pretty-props

> Render prop types in a pretty way! Useful for storybook addons that display prop types.

Latest version **1.2.1** (published 2020-06-17) · MIT license · 0 weekly downloads

## Install

```sh
npm install storybook-pretty-props
pnpm add storybook-pretty-props
yarn add storybook-pretty-props
bun add storybook-pretty-props
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.1 |
| Published | 2020-06-17 |
| First published | 2020-04-10 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 78.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Andrew Lisowski |
| Maintainers | alisowski |

## Links

- npm: https://www.npmjs.com/package/storybook-pretty-props
- Repository: https://github.com/hipstersmoothie/storybook-pretty-props
- Homepage: https://github.com/hipstersmoothie/storybook-pretty-props#readme
- Issues: https://github.com/hipstersmoothie/storybook-pretty-props/issues
- npm.io page: https://npm.io/package/storybook-pretty-props

## Recent versions

- 1.2.1 (latest) — 2020-06-17
- 1.2.2-canary.34.189.0 (canary) — 2022-12-13
- 1.2.2-canary.33.185.0 — 2022-12-12
- 1.2.2-canary.32.181.0 — 2022-12-07
- 1.2.2-canary.31.177.0 — 2022-07-21
- 1.2.2-canary.30.173.0 — 2022-06-22
- 1.2.2-canary.29.169.0 — 2022-06-01
- 1.2.2-canary.28.165.0 — 2022-04-13
- 1.2.2-canary.27.161.0 — 2022-03-08
- 1.2.2-canary.26.157.0 — 2022-03-03
- 1.2.2-canary.25.153.0 — 2022-02-26
- 1.2.2-canary.24.149.0 — 2022-02-13
- 1.2.2-canary.23.145.0 — 2022-02-13
- 1.2.2-canary.22.141.0 — 2022-01-15
- 1.2.2-canary.21.137.0 — 2022-01-15
- … 29 more at https://npm.io/package/storybook-pretty-props/versions

## README

# storybook-pretty-props

Render prop types from react-docgen or react-docgen-typescript in a pretty way.
Useful for storybook addons that display prop types.

## Installation

```sh
npm i storybook-pretty-props
# with yarn
yarn add storybook-pretty-props
```

## Usage

Combine this with docgen output to render the prop type!

```js
import PrettyPropType from "storybook-pretty-props";

const Example = () => (
  <PrettyPropType
    propType={{
      name: "enum",
      value: [
        { name: "literal", value: "a" },
        { name: "literal", value: "b" },
        { name: "literal", value: "c" }
      ]
    }}
  />
);
```

## Contributors ✨

Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):

<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
<!-- prettier-ignore-start -->
<!-- markdownlint-disable -->
<table>
  <tr>
    <td align="center"><a href="http://hipstersmoothie.com"><img src="https://avatars3.githubusercontent.com/u/1192452?v=4" width="100px;" alt=""/><br /><sub><b>Andrew Lisowski</b></sub></a><br /><a href="https://github.com/hipstersmoothie/storybook-pretty-props/commits?author=hipstersmoothie" title="Code">💻</a> <a href="https://github.com/hipstersmoothie/storybook-pretty-props/commits?author=hipstersmoothie" title="Documentation">📖</a> <a href="#example-hipstersmoothie" title="Examples">💡</a> <a href="https://github.com/hipstersmoothie/storybook-pretty-props/commits?author=hipstersmoothie" title="Tests">⚠️</a></td>
    <td align="center"><a href="https://github.com/petermikitsh"><img src="https://avatars3.githubusercontent.com/u/1571918?v=4" width="100px;" alt=""/><br /><sub><b>Peter Mikitsh</b></sub></a><br /><a href="#example-petermikitsh" title="Examples">💡</a> <a href="https://github.com/hipstersmoothie/storybook-pretty-props/commits?author=petermikitsh" title="Code">💻</a></td>
  </tr>
</table>

<!-- markdownlint-enable -->
<!-- prettier-ignore-end -->
<!-- ALL-CONTRIBUTORS-LIST:END -->

This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!

---
_Source: https://npm.io/package/storybook-pretty-props · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._