0.0.3 • Published 4 years ago
immer-context v0.0.3
Installation 🔥
npm i immer-context
# or if you prefer Yarn:
yarn add immer-context
# or with pnpm:
pnpm i immer-context
Philosophy 🔖
When we want to create a context for a function component and want to be able to access that context in child components
/** Input.tsx */
export const Input = (props:any) => {
const [context, setContext] = useIContext;
const {applicantName} = context;
const handleInputChange = (event) => {
setContext((draft:any) => void(draft.applicantName = event.target.value));
}
return <input value={applicantName} name="applicant-name" />
}
/** Form.tsx */
import {useIContext, withIContext} from 'immer-context';
const Form = (props: any) => {
const [context, setContext] = useIContext();
useEffect(() => {
setContext((draft: any) => void (draft.applicantName = 'Henry'));
});
const {formName} = context;
return (
<div>
<h4>Form Name - {formName}</h4>
<Input />
</div>
);
};
const initialState = {
formName: 'Cool Form'
};
export const ContextParent = connect((state) => state)(
withIContext(Form, initialState)
);