Hear-ye NPM | npm.io

Hear-ye

Hear-ye is an opinionated component workbench for React. It helps developing components in isolation and picking the right component for the right need.

Installation

Use the package manager npm to install hear-ye.

npm install hear-ye

Requirements

Your project needs to: 1. be built with webpack 1. be written in TypeScript 1. follow a specific file structure (see File structure paragraph)

Usage

Assuming your component library is called awesome-components:

Example demo file

// src/button/button.tsx
import * as React from 'react';

// styling is optional
import './button.scss';

interface ButtonProps {
  onClick?: (event: React.MouseEvent<HTMMButtonElement>) => void;
}

export function Button(props: ButtonProps) {
  return <button {...props}/>;
}

// src/button/button.demo.tsx
import { Button } from 'awesome-components';
import { Gallery, Sink } from 'hear-ye';
import * as React from 'react';

function ButtonDemo() {
  return <Sink>
    <Button onClick={e => console.log(e)}/>
  </Sink>;
}

Gallery.add({
  path: ['Button', 'Basic demo'],
  component: <ButtonDemo/>
});