1.1.2 • Published 9 months ago
react-constate v1.1.2
React Constate
This is a utility function made to make React Context API convenient to use.
Reference: constate
Usage
// [COMPONENT_DIR]/Provider.ts
function use[NAME](props) {
const [a, setA] = useState<string>('abc');
const [b, setB] = useState<number>(123);
const [c, setC] = useState<boolean>(false);
...
return { a, b, c, ... };
}
export const { Provider, useContext } = createProvider(use[NAME]);
// [COMPONENT_DIR]/index.tsx
import { Provider } from './Provider';
export default function [NAME]() {
...
return (
<Provider {...}>
<... />
</Provider>
);
}
// [COMPONENT_DIR]/child/index.tsx
import { useContext } from '../Provider';
export default function [CHILD]() {
const a = useContext((value) => value.a); // string
const b = useContext((value) => value.b); // number
const c = useContext((value) => value.c); // boolean
...
return <... />;
}
or
// [COMPONENT_DIR]/child/index.tsx
import { useContext } from '../Provider';
export default function [CHILD]() {
const a = useContext('a'); // string
const b = useContext('b'); // number
const c = useContext('c'); // boolean
...
return <... />;
}