@robinblomberg/react-store-hook v0.2.0

React Store Hook

Example

import { useStore } from '@robinblomberg/react-store-hook';

const useLogin = () => {
  const store = useStore({
    handlers: {
      handleEmailChange: (event: React.ChangeEvent<HTMLInputElement>) => {
        store.mutations.setEmail(event.target.value);
      },
      handlePasswordChange: (event: React.ChangeEvent<HTMLInputElement>) => {
        store.mutations.setPassword(event.target.value);
      },
      handleRememberMeChange: (event: React.ChangeEvent<HTMLInputElement>) => {
        store.mutations.setRememberMe(event.target.checked);
      },
    },
    mutations: {
      setEmail: (email: string) => {
        return { email };
      },
      setPassword: (password: string) => {
        return { password };
      },
      setRememberMe: (rememberMe: boolean) => {
        return { rememberMe };
      },
    },
    state: {
      email: '',
      password: '',
      rememberMe: false,
    },
  });
  return store;
};

export const Login = () => {
  const { handlers, state } = useLogin();
  return (
    <form>
      <label>
        {'E-post'}
        <input
          onChange={handlers.handleEmailChange}
          type="email"
          value={state.email}
        />
      </label>
      <label>
        {'Lösenord'}
        <input
          onChange={handlers.handlePasswordChange}
          type="password"
          value={state.password}
        />
      </label>
      <label>
        <input
          checked={state.rememberMe}
          onChange={handlers.handleRememberMeChange}
          type="checkbox"
        />
        {'Kom ihåg mig'}
      </label>
      <button type="submit">{'Logga in'}</button>
    </form>
  );
};