0.0.3 • Published 4 years ago

immer-context v0.0.3

Weekly downloads
1
License
ISC
Repository
-
Last release
4 years ago

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)
);