@unitedstatespowersquadrons/components 1.1.2 → 1.2.0-pre.1

package/Readme.md

@@ -16,6 +16,30 @@ Install dependencies with
 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
+<div data-react-component="Namespace.Component" data-props="{}"></div>
+```
+
+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](Toasts/Readme.md) usage.

package/Reducer/Example/reducer.tsx

@@ -1,4 +1,3 @@
-import { createContext } from "react";
 import { Draft } from "immer";
 import * as ReducerHandlers from "./reducerHandlers";
 import { AppState, ServerResponse } from "./types";
@@ -27,9 +26,4 @@ export const reducer = (draft: Draft<AppState>, action: AppAction): void => {
   }
 };
 
-const StateContext = createContext<AppState | null>(null);
-const DispatchContext = createContext<React.Dispatch<AppAction> | null>(null);
-const handlers = Object.values(ReducerHandlers);
-
-export const { AppProvider, useAppDispatch, useAppState } =
-  buildReducer(reducer, StateContext, DispatchContext, handlers);
+export const { AppProvider, useAppDispatch, useAppState } = buildReducer(reducer, Object.values(ReducerHandlers));

package/Reducer/buildReducer.tsx

@@ -1,4 +1,4 @@
-import React, { useContext, useMemo } from "react";
+import React, { createContext, useContext, useMemo } from "react";
 import { Draft, produce } from "immer";
 import { useImmerReducer } from "use-immer";
 import { ReducerHandler } from "./types";
@@ -10,10 +10,11 @@ interface InitialAppProps<AppState> {
 
 export default function buildReducer<AppState, AppAction>(
   reducer: (draft: Draft<AppState>, action: AppAction) => void,
-  StateContext: React.Context<AppState | null>,
-  DispatchContext: React.Context<React.Dispatch<AppAction> | null>,
   handlers: ReducerHandler<AppAction>[] = []
 ) {
+  const StateContext = createContext<AppState | null>(null);
+  const DispatchContext = createContext<React.Dispatch<AppAction> | null>(null);
+
   function AppProvider(props: InitialAppProps<AppState>) {
     const [providerState, dispatch] = useImmerReducer(reducer, props.initialState, (state: AppState) => {
       return produce(state, draft => draft);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unitedstatespowersquadrons/components",
-  "version": "1.1.2",
+  "version": "1.2.0-pre.1",
   "description": "USPS shared React components library",
   "main": "index.tsx",
   "scripts": {