react-components

rawpixel React component library.

Install

The library is published to GitHub packages, so the host app will need an .npmrc file defined to indicate where to look for the @rawpixel-public packages.

# .npmrc contents
@rawpixel-public:registry=https://npm.pkg.github.com

Then add the package via npm/yarn.

npm install --save @rawpixel-public/react-components

Ensure peerDependencies specified are also installed.

Usage

import React, { Component } from "react";

import MyComponent from "@rawpixel-public/rawpixel-components";

class Example extends Component {
  render() {
    return <MyComponent />;
  }
}

Development

Clone the repository and install dependencies via yarn, in both the root directory and ./storybook

yarn install
cd storybook && yarn install

Commit messages

Use conventional-commits convention to indicate the type of change you've made. This will be used to generate the changelog release notes and semantic version when publishing a package.

Local environment

To develop components locally within this repository, you can use Storybook.

# watch changes in ./src
yarn start
# starts storybook development server @ http://localhost:6006
cd storybook && yarn start

Alternatively, you could use npm link from your host application to link @rawpixel-public/react-components to your local instance of this repository, then develop the component from the host application.

In order to ensure your component can be imported, you need to implement at least one of the following:

import and export your component from ./src/index.js. This means apps can import the component like this:

import { MyComponent } from "@rawpixel-public/react-components";

const Example = () => (
  <div>
    <MyComponent />
  </div>
);

Or, update rollup.config.js to include the file separately in the input config array to generate it's own file. This would allow imports like this, which may be preferable for code-splitting:

import MyComponent from "@rawpixel-public/react-components/dist/my-component";

const Example = () => (
  <div>
    <MyComponent />
  </div>
);

Publishing

Package

Ensure you have configured your development environment to publish to GitHub packages.

Then increment version and publish (example below).

npm run release # tags and updates changelog
git push --follow-tags origin master && npm publish # publish

Documentation

Exports the Storybook site statically and publishes to GitHub pages.

yarn deploy

License

MIT © RawPixel