Matchbox

Matchbox is an open source React component library, built for SparkPost's UI.

Links:

• Component Demo
• Sass Documentation

---

Usage

1. Installation

In your React project, use npm to install matchbox:

npm install @sparkpost/matchbox --save

2. Include Styles

 // TODO: fill this out

3. Use the React components

In-depth usage docs coming in the future. For now, reference storybook.

import React from ‘react’;
import { Panel } from '@sparkpost/matchbox';

const YourComponent = () => (
 <Panel accent title='Hey!'>
  <Panel.Section>
    Section Content
  </Panel.Section>
 </Panel>
);

Storybook Development

React Storybook is included for local development.

# Runs storybook at localhost:9001
npm run start:storybook

Local Development with your app

# Make sure to turn off your webpack dev server before linking
# npm link this repo
npm link

# Build the packages
npm run build

# You can also run the packages in watch mode if you prefer
# Specify the package you want to watch with --scope
lerna exec --scope @sparkpost/matchbox -- npm run watch

# Link your app to this repo
cd ~/path/to/your-app
npm link @sparkpost/matchbox
npm link @sparkpost/matchbox-icons

# Start your app
npm run start