Skip to content

conor-cafferkey-sociomantic/nessie-ui

 
 

Repository files navigation

Nessie

GitHub package version Nessie build status

React + CSS-Modules + Loads of tests = Robust components for monstrous UIs!

Usage

There are three dependencies you’ll need to include in your app to use Nessie:

  1. The Nessie JS,
  2. the Nessie CSS
  3. and the Nessie SVG sprite map

Since your exact requirements may vary, we’ll leave it up to you decide exactly how these should be implemented (the options are outlined below).

JS

Importing all components as Nessie.ComponentName

If you want everything:

import * as Nessie from 'nessie-ui';

Importing individual components:

If you want specific components:

import { ComponentName } from 'nessie-ui';

CSS

The Nessie CSS is bundled separately in dist/styles.css. You can either import this file using webpack css-loader or load it directly in your HTML.

Sprite map

In order to use the <Icon> component (and other components that make use of icons), you’ll need the Nessie SVG sprite map component.

There are two ways that you can implement this:

Including the raw sprite map your HTML

You can add /dist/sprite.html directly in your HTML. The method of doing this is up to you.

Using the SpriteMap component

The <SpriteMap> component can be inserted anywhere inside your <App> (e.g. as a direct child of the Nessie <Page> component).

However the preferred method is to add a second React mount point specifically for the sprite map. The pattern is:

<html>
    <head>
        ...
    </head>
    <body>
        <div id="root"></div>
        <div id="spriteMap"></div>
    </body>
</html>
ReactDOM.render( <App />, document.getElementById( 'root' ) );
ReactDOM.render( <SpriteMap />, document.getElementById( 'spriteMap' ) );

Component Reference

See the individual README.md files in each component folder.

Contributing

We gladly accept and review any pull requests. Feel free! ❤️

To get you started we’ve written a Nessie Dev Guide.

Code of Conduct

This project adheres to the Contributor Covenant. By participating, you are expected to honor this code.

Nessie - Code of Conduct

About

Diverse and robust React component library

Resources

License

Code of conduct

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 82.7%
  • CSS 15.3%
  • HTML 1.9%
  • Shell 0.1%