@textkernel/nice-react NPM

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