Nice! React Components

Nice! React provides UI elements from the Nice! UI library in the form of React components. It is maintained by the Nice! circle within Textkernel.

To get started, check out https://nice.textkernel.nl/react.

Quick start

Several quick start options are available:

Clone the repo:

$ git clone https://github.com/textkernel/nice-react.git

Install with npm:

$ npm install --save @textkernel/nice-react

Usage

Import the desired UI component from the library, e.g.:

const { Alert } = require('nice-react');

...or using ES6 import:

import { Alert } from 'nice-react';

Include the component in your page

<Alert context="primary" heading="I'm a nice React component!">
    Some content
</Alert>

Some components have sub-components of their own. These are defined as class properties of the main component, so no need to import them separately. For example, the Pagination component comes with Item and Gap which can be used like this:

import Pagination from 'nice-react';

<Pagination>
    <Pagination.Item disabled>
        &laquo; Previous
    </Pagination.Item>
    <Pagination.Item current>
        1
    </Pagination.Item>
    <Pagination.Gap />
    <Pagination.Item>
        3
    </Pagination.Item>
</Pagination>

Examples & Testing

Storybook

Nice! React supports Storybook.

Make sure you have Storybook installed (globally):
```
$ npm i -g @storybook/cli
```
Run npm run storybook
Go to http://localhost:9001 to check out examples of all components

...or check out https://nice.textkernel.nl/react

Tests

Run tests: npm test
Run tests in watch mode: npm run test:watch
Coverage report: npm run test:coverage

Publishing on NPM

npm publish --access=public

textkernel/nice-react