@stardust-ui/react-bindings

@stardust-ui/react-bindings

A set of reusable components and hooks to build component libraries and UI kits.

• Installation
• Hooks
  • useStateManager()
    • Usage
    • Reference

Installation

NPM

npm install --save @stardust-ui/react-bindings

Yarn

yarn add @stardust-ui/react-bindings

Hooks

useStateManager()

A React hook that provides bindings for state managers.

Usage

The examples below assume a component called <Counter> will be used this way:

import { useStateManager } from "@stardust-ui/react-bindings";
import { createManager, ManagerFactory } from "@stardust-ui/state";

type InputProps = {
  defaultValue?: string;
  value?: string;
  onChange: (value: string) => void;
};
type InputState = { value: string };
type InputActions = { change: (value: string) => void };

const createInputManager: ManagerFactory<InputState, InputActions> = config =>
  createManager<InputState, InputActions>({
    ...config,
    actions: {
      change: (value: string) => () => ({ value })
    },
    state: { value: "", ...config.state }
  });

const Input: React.FC<InputProps> = () => {
  const [state, actions] = useStateManager(createToggleManager, props, {
    mapPropsToInitialState = () => ({ value: props.defaultValue }),
    mapPropsToState = () => ({ value: props.value })
  });

  return (
    <input
      onChange={e => {
        actions.change(e.target.value);
        if (props.onChange) onChange(e.target.value);
      }}
      value={state.value}
    />
  );
};

Reference

const [state, actions] = useStateManager(createToggleManager, props, {
  autoControlledProps: ['value']
})
const [state, actions] = useStateManager(
  managerFactory: ManagerFactory<State, Actions>, 
  props: Props,
  options: UseStateManagerOptions<Props>,
)

• managerFactory - a factory that implements state manager API
• options.mapPropsToInitialState - optional, maps component's props to the initial state
• options.mapPropsToState - optional, maps component's props to the state, should be used if your component implements controlled mode.