USPS React Components Library

!NPM Version

Usage

``ts
import * from "@unitedstatespowersquadrons/components";
`

Developer Setup

Install dependencies with

`sh
yarn
`

Mounting Components

Components can be mounted by passing them into the included mount function in
your application asset root.

`tsx
mount({
ActionButton,
});
`

This will search the DOM for elements matching the following pattern, and
attempt to render the corresponding component at that location.

`html



`

In Rails, you can generate this element with the following helper call:

`rb
content_tag(:div, '', data: { 'react-component' => component_name, props: props.to_json })
`

Toasts

More detailed information is available for Toasts usage.

Reducer

To create a reducer, follow the pattern described in Reducer/Example.

There is also an example in appstate.tsx for if you only need access to app
state, but do not have any dispatchable events.

Shared TSC Config

To include the TSC config from this library, create ./tsconfig.json:

`json
{
"extends": "./node_modules/@unitedstatespowersquadrons/components/tsconfig.json",
"exclude": [
"**/proto",
"node_modules",
"public",
"vendor",
"tmp"
]
}
`

Automated Testing

GitHub Actions will automatically run eslint and tsc` on branch pushes.