Rivet React components
npm install rivet-reactRivet-react is a library of React components that implement the Rivet Software Design System. The components can be used by any Javascript application with a peer dependency of React 16+.
- Component Documentation and Style Guide
- Contribution Guidelines
- GitHub repo
- NPM package
- Circle CI
| Branch | Build | Code Coverage |
| ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| master |  |  |
| beta |  |  |
To install the rivet-react package from NPM,
``shell`
npm install rivet-react
Or with yarn,
`shell`
yarn add rivet-react
Once installed you can use the components in your project. The Rivet styles are included as a dependency of _rivet-react_ but they are not bundled into the components, so you'll need to import them as well.
`typescript static
import * as React from "react";
import "rivet-core/css/rivet.min.css";
import { Alert } from "rivet-react";
`
Rivet-react relies on several icons and stickers from the Rivet Icons and Rivet Stickers packages. In order to load the CSS and custom JavaScript necessary to display these elements, client applications will need to include the following in their index.jsx file similarly to how the Rivet core CSS is imported.
`typescript static``
import "~/rivet-icons/dist/rivet-icon-element.js";
import "~/rivet-icons/dist/rivet-icon-element.css";
import "~/rivet-stickers/dist/rivet-sticker-element.js";
import "~/rivet-stickers/dist/rivet-sticker-element.css";
Check out the Component Documentation and Style Guide for comprehensive component documentation and examples.
You can also find documentation for the 2.x beta components.
Rivet-react is open source and maintained by members of the Indiana University organization on GitHub. If you have questions about the library or encounter problems please file an issue. If you wish to contribute, pull requests are welcome! Please review our Contribution Guidelines.