USPS React Components Library

Usage

import * from "@unitedstatespowersquadrons/components";

Developer Setup

Install dependencies with

yarn

Mounting Components

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

mount({
  ActionButton,
});

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

<div data-react-component="Namespace.Component" data-props="{}"></div>

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

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:

{
  "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.