react-localstate-hook

Simple state management by react context. You can write the functional component code easy.

Usage no npm install needed!

<script type="module">
  import reactLocalstateHook from 'https://cdn.skypack.dev/react-localstate-hook';
</script>

README

react-localstate-hook

Simple state management by react context. You can write the functional component code easy.

Usage

Let me explain with sample codes

1. Create a shared statement file (state.ts)

All compoents which involved this context use this state.

import initStateHook from "react-localstate-hook";

type State = {
  name: string,
  tasks: string[]
};

const defaultState: State = {
  name: "yangga",
  tasks: ["eat", "swim", "study", "play-games"]
};

const { StateProvider, useStateHook } = initStateHook({ defaultState });

export { StateProvider, useStateHook };

2. Setup the "Provider" on high layer component

import { StateProvider } from "./state.ts";

import Namecard from "./Camecard";
import TaskList from "./TaskList";
import NameChanger from "./NameChanger";

...

export default () => {
    return (
        <>
            <StateProvider>
                <Namecard />
                <TaskList />
                <NameChanger />
            </StateProvider>
        <>
    )
}

3. Now, you can use hooks

// Camecard.tsx
import { useStateHook } from "./state.ts";

export default () => {
  const [state, setState] = useStateHook();
  return <Text>{state.name}</Text>;
};

// TaskList.tsx
import { useStateHook } from "./state.ts";

export default () => {
  const [state, setState] = useStateHook();
  return (
    <View>
      {state.tasks.map(t => (
        <Text>{t}</Text>
      ))}
    </View>
  );
};

// NameChanger.tsx
import { useStateHook } from "./state.ts";

export default () => {
  const [state, setState] = useStateHook();
  return (
    <TextInput value={state.name} onChangeText={name => setState({ name })} />
  );
};