npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-display-window

v2.1.2

Published

A simple tool to showcase react components

Downloads

24

Readme

React Display Window

React Display Window is a simple tool to write documentation for when having a full guide is overkill. React Display Window is therefore best suited for one component libraries or libraries where all of the components are related.

It's also very useful during the development stage of these components libraries because it allows you to see the code working and running like in a real usage environment.

Installation

Install it as any other dev dependency in your repo:

$ npm install --development react-display-window

Usage

First we create an .mdx file which would contain the documentation of the project. You can use React and markdown inside this file.

// my-component.mdx

import { PlayGround, Knobs, PropsTable } from 'react-display-window/lib/components';
import Button from './src';

# Button

This is a component that's being documented by react-display-window


## Example

This will render the component and the code.

<PlayGround>
  <Button category="primary">
    My button
  </Button>
</PlayGround>

## Props

### PropsTable

This will document all the props the component accepts.

<PropsTable component={Button} />

### Knobs

This will render the component and some controllers to edit it's props in real time.

<Knobs
  component={Button}
  defaults={{ category: 'primary' }}>
  <Button>
    My button
  </Button>
</Knobs>

Next, we just have to run React Display Window and point it to our file:

npx rdw serve my-component.mdx

And that's it. You can now go to the url displayed in your console and have a look at your newly created display window for your component.

Once you're happy with your documentation, you can run:

npx rdw build my-component --out-dir docs/

And this will build your documentation and make it available in the folder specified. After, you can deploy it using github pages or any other static provider.

Example

An example repo can be found at Drawbotics/button

Components

TOC

A component that will render all the headers inside the file as a table of contents with links to specific sections.

import { Toc } from 'react-display-window/lib/components';

<Toc />

PlayGround

A component that will render children and will also display the code used.

import { PlayGround } from 'react-display-window/lib/components';
import MyComponent from './src';

<PlayGround>
  <MyComponent />
</PlayGround>

PropsTable

A component that will render a table with all the propTypes the passed component accepts.

import { PropsTable } from 'react-display-window/lib/components';
import MyComponent from './src';

<PropsTable component={MyComponent} />

Knobs

Similar to playground in that it renders it's children but instead of showing the code used, it will display some controls to manipulate in real time the props that component accepts. It also takes a defaults props where default values for the props can be specified.

import { Knobs } from 'react-display-window/lib/components';
import MyComponent from './src';

<Knobs component={MyComponent} defaults={{ myProp: true }}>
  <MyComponent />
</Knobs>

Common Patterns

Add a custom title and dependencies

Since we can use React inside our doc file, adding a custom title or dependencies is as simple as installing react-helmet and using it at the top of our docs:

import { Helmet } from 'react-helmet';

<Helmet>
  <title>My Custom Title</title>
  <link rel="stylesheet" href="http://link-to/my-custom.css" />
</Helmet>

Contributing

Everyone is welcome to contribute with issues, feature requests or pull requests.

Planned

  • [ ] Custom themes
  • [ ] Editable PlayGround component
  • [ ] Support for more prop types in Knobs component

Sponsors

Sponsored by:

License

Logo by nicmosc

MIT