@stardust-ui/react-bindings
    TypeScript icon, indicating that this package has built-in type declarations

    0.40.2 • Public • Published

    @stardust-ui/react-bindings

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

    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 <Input> will be used this way:

    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> = props => {
      const [state, actions] = useStateManager(createInputManager, {
        mapPropsToInitialState: () => ({ value: props.defaultValue }),
        mapPropsToState: () => ({ value: props.value })
      });
     
      return (
        <input
          onChange={e => {
            actions.change(e.target.value);
            if (props.onChange) props.onChange(e.target.value);
          }}
          value={state.value}
        />
      );
    };

    Reference

    const [state, actions] = useStateManager(createInputManager)
    const [state, actions] = useStateManager(
      managerFactoryManagerFactory<State, Actions>, 
      optionsUseStateManagerOptions<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.

    Keywords

    none

    Install

    npm i @stardust-ui/react-bindings

    DownloadsWeekly Downloads

    35

    Version

    0.40.2

    License

    MIT

    Unpacked Size

    194 kB

    Total Files

    42

    Last publish

    Collaborators

    • alinais
    • davezuko
    • layershifter
    • levithomason
    • miroslavstastny
    • mnajdova