@peculiar/fortify-webcomponents-react/README.md

React specific wrapper for @peculiar/fortify-webcomponents

<p align="center">
  <a href="https://fortifyapp.com/" rel="noopener" target="_blank"><img width="128" src="https://fortifyapp.com/favicons/android-chrome-512x512.png" alt="Fortify logo"></a></p>
</p>

<h1 align="center">Fortify Web components React</h1>

These are React specific building blocks on top of [@peculiar/fortify-webcomponents](../webcomponents) components.

## Using components

To get started with using components install the `@peculiar/fortify-webcomponents-react` package:

```
npm install @peculiar/fortify-webcomponents-react
```

Import the stylesheets from peculiar in your main app file:

```ts
import '@peculiar/fortify-webcomponents/dist/peculiar/peculiar.css';
```

Then you can use a components anywhere in your JSX.

```tsx
import React from 'react';
import ReactDOM from 'react-dom';
import { PeculiarFortifyCertificates } from '@peculiar/fortify-webcomponents-react';

ReactDOM.render(
  <PeculiarFortifyCertificates />,
  document.querySelector('#root'),
);
```

## Examples

Are you looking for an example project to get started? [We host some](https://fortifyapp.com/examples#certificate_management).

## Documentation

Check out our [documentation website](https://fortifyapp.com/docs#overview).

### Customize the theme​

To customize the look and feel of the components, components have CSS variables you can override to provide a theme for your components. See the supported CSS variables in [peculiar.scss](https://github.com/PeculiarVentures/fortify-webcomponents/tree/master/packages/webcomponents/src/css/peculiar.scss) file.