React + CSS-Modules + Loads of tests = Robust components for monstrous UIs!
There are three dependencies you’ll need to include in your app to use Nessie:
- The Nessie JS,
- the Nessie CSS
- 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).
If you want everything:
import * as Nessie from 'nessie';
If you want specific components:
import { ComponentName } from 'nessie';
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.
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:
You can add /dist/sprite.html directly in your HTML. The method of doing this
is up to you.
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' ) );
See the individual README.md files in each component folder.
We gladly accept and review any pull requests. Feel free! ❤️
To get you started we’ve written a Nessie Dev Guide.
This project adheres to the Contributor Covenant. By participating, you are expected to honor this code.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent