react-hooks/

1import * as React from 'react';
2
3const <%= _.upperFirst(_.camelCase(name)) %>Context = React.createContext();
4
5function <%= _.upperFirst(_.camelCase(name)) %>Provider(props) {
6  const [<%= _.camelCase(name) %>, set<%= _.upperFirst(_.camelCase(name)) %>] = React.useState(0);
7  const value = [<%= _.camelCase(name) %>, set<%= _.upperFirst(_.camelCase(name)) %>];
8
9  return <<%= _.upperFirst(_.camelCase(name)) %>Context.Provider value={value} {...props} />;
10}
11
12function use<%= _.upperFirst(_.camelCase(name)) %>() {
13  const context = React.useContext(<%= _.upperFirst(_.camelCase(name)) %>Context);
14  if (!context) {
15    throw new Error(`use<%= _.upperFirst(_.camelCase(name)) %> must be rendered within the <%= _.upperFirst(_.camelCase(name)) %>Provider`);
16  }
17  return context;
18}

1import * as React from "react";
2
3interface <%= _.upperFirst(_.camelCase(name)) %>Props {
4  count: number;
5}
6
7type <%= _.upperFirst(_.camelCase(name)) %>Tuple = (
8  | <%= _.upperFirst(_.camelCase(name)) %>Props
9  | React.Dispatch<React.SetStateAction<<%= _.upperFirst(_.camelCase(name)) %>Props>>
10)[];
11
12const <%= _.upperFirst(_.camelCase(name)) %>Context = React.createContext<<%= _.upperFirst(_.camelCase(name)) %>Tuple | undefined>(
13  undefined
14);
15
16interface <%= _.upperFirst(_.camelCase(name)) %>ProviderProps {
17  initialState: <%= _.upperFirst(_.camelCase(name)) %>Props;
18  children: React.ReactChildren;
19}
20
21/**
22 * @param props Props to pass to provider
23 * @param props.initialState Initial state for context
24 * @returns {React.ReactElement} Context Provider
25 */
26export function <%= _.upperFirst(_.camelCase(name)) %>Provider({
27  initialState,
28  ...props
29}: <%= _.upperFirst(_.camelCase(name)) %>ProviderProps) {
30  const [testingValue, set<%= _.upperFirst(_.camelCase(name)) %>] = React.useState(initialState);
31  const value = [testingValue, set<%= _.upperFirst(_.camelCase(name)) %>];
32
33  return <<%= _.upperFirst(_.camelCase(name)) %>Context.Provider value={value} {...props} />;
34}
35
36/**
37 * Hook to access state
38 *
39 * @returns {<%= _.upperFirst(_.camelCase(name)) %>Tuple} hook to access state and dispatch
40 */
41export function use<%= _.upperFirst(_.camelCase(name)) %>() {
42  const context = React.useContext(<%= _.upperFirst(_.camelCase(name)) %>Context);
43  if (!context) {
44    throw new Error(
45      `use<%= _.upperFirst(_.camelCase(name)) %> must be rendered within the <%= _.upperFirst(_.camelCase(name)) %>Provider`
46    );
47  }
48  return context;
49}