React Store Input

The goal of this package is to make state management easier when using input elements in React.

It eliminates repetitive code required to implement state changes and subscriptions for input elements, and provides a simple interface.

At the same time, it allows you to use all the attributes originally provided by the input tag as-is, without needing to learn this package.

Get Started

This is a simple example of how to use this package.

``tsx
import { useFormStore } from "dn-react-input";

export default function App() {
const store = useFormStore({
email: "",
password: "",
});

const submit = async () => {
const { email, password } = store.state;

alert(Email: ${email}\nPassword: ${password});
};

return (
onSubmit={(e) => {
e.preventDefault();
submit();
}}
>


Submit

);
}
`

How to define state?

You can define any state you want as an object when calling useStore.

`tsx
function Component() {
...

const store = useStore({
email: "",
password: "",
rememberMe: false,
});

...
}
`

It's a single source of truth for your form state.

How to get input values?

You can access the current values of the input elements through the state property of the store.

`tsx
function Component() {
...

const submit = () => {
const { email, password, rememberMe } = store.state;
};

...
}
`

How to add input elements?

You can add input elements using the Input component provided by the store. There are 'Select' and 'Textarea' components as well.

`tsx
import { Input } from "dn-react-input";

function Component() {
...

return (







);
}


`

If you want to avoid passing the store to each input component, use useStoreComponent. This hook provides input components that are already connected to the store.

`tsx
import { useStoreComponent } from "dn-react-input";

function Component() {
...
const component = useStoreComponent(store);

return (







);
}


`

useFormStore is a facade that combines useStore and useStoreInput for convenience.

`tsx
import { useFormStore } from "dn-react-input";

function Component() {
...
const store = useFormStore({
email: "",
password: "",
rememberMe: false,
});

return (







);
}


`

How to render components on state changes?

If you want to render a component only when specific parts of the state change, use the useSelector hook.

`tsx
import { useSelector } from "dn-react-input";

function Component() {
...
const email = useSelector(store, (state) => state.email);

return

;
}
`

If you want to render components in an inline manner, use the createRender function. By using this, you can avoid creating separate components for each part of the state you want to track.

`tsx
import { createRender } from "dn-react-input";

function Component() {
...
return (



);
}
`

Store.render is a shortcut for createRender when you use useFormStore.

`tsx
function Component() {
const store = useFormStore({
email: "",
password: "",
});

return (



);
}
`

How to subscribe to state changes?

You can subscribe to state changes using the subscribe method of the store.

`tsx
function Component() {
...
useEffect(() => {
const unsubscribe = store.subscribe((state) => {
console.log(State changed, state);
});

return () => {
unsubscribe();
};
}, []);

...
}
`

How to update state manually?

You can update the state manually using the dispatch method of the store.

`tsx
function Component() {
...
const updateEmail = () => {
store.dispatch({ email: "ohjinsu98@icloud.com" });
};

return Update Email;
}
`

The dispatch method uses immerjs internally to update the state, so you can also use a function to update the state based on the previous state.

`tsx
function Component() {
...

const updateEmail = () => {
store.dispatch((state) => {
state.email = "ohjinsu98@icloud.com";
});
};

return Update Email;
}
`

How to create custom input components?

You can create custom input components using the useStoreInput hook. This hook provides the necessary props to connect your custom input component to the store: name, value, defaultValue, defaultChecked, onChange, and ref which already subscribed to the store.

`tsx
import { useStoreInput } from "dn-react-input";

function CustomInput({ store }: { store: Store<{ email: string }> }) {
const inputProps = useStoreInput(store, {
name: "email",
});

return ;
}
`

How to creatre custom controller components?

If your custom component is not an html input element, you can use the useStoreController hook. This hook provides the necessary props to connect your custom controller component to the store: ref, onSubscribe, and onDispatch.

`tsx
import { useStoreController } from "dn-react-input";

type State = {
count: number;
};

function CustomController({ store }: { store: Store }) {
const controllerProps = useStoreController(store, {
onSubscribe: (state, element) => {
element.textContent = Count: ${state.count};
},
onDispatch: (state, element) => {
state.count += Number(element.textContent.replace("Count: ", ""));
},
});

return