Add examples for another hooks?

[sosukesuzuki]

Hi, I added example for useReducer with #118 .
What do you think about adding examples of another hooks?

[piotrwitek]

Yeah, that's a good idea 👍 I'll need to figure out some clear and concise examples.

• useState - let's use basic Counter example from react docs:

function CounterWithState({initialCount}) {
  const [count, setCount] = useState(initialCount);
  return (
    <>
      Count: {count}
      <button onClick={() => setCount(initialCount)}>Reset</button>
      <button onClick={() => setCount(prevCount => prevCount + 1)}>+</button>
      <button onClick={() => setCount(prevCount => prevCount - 1)}>-</button>
    </>
  );
}

• useEffect

function ClickCounterWithEffect({initialCount}) {
  const [count, setCount] = useState(0);

  useEffect(() => {
    // Update the document title using the browser API
    document.title = `You clicked ${count} times`;
	return () => { document.title = '' };
  }, [count]);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

• useRef

function TextInputWithFocusButton() {
  const inputEl = useRef(null);
  const onButtonClick = () => {
    // `current` points to the mounted text input element
    inputEl.current.focus();
  };
  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </>
  );
}

• useContext - TODO

[sosukesuzuki]

@piotrwitek I wrote example for useContext. What do you think about this?
This was rewritten with reference to https://reactjs.org/docs/context.html#updating-context-from-a-nested-component (with hooks).

interface Theme {
  foreground: string;
  background: string;
}

interface Themes {
  light: Theme;
  dark: Theme;
}

export const themes: Themes = {
  light: {
    foreground: "#000000",
    background: "#eeeeee"
  },
  dark: {
    foreground: "#ffffff",
    background: "#222222"
  }
};

const ThemeContext = React.createContext({
  theme: themes.dark,
  toggleTheme: () => {}
});

function ThemeTogglerButton() {
  const { theme, toggleTheme } = React.useContext(ThemeContext);
  return (
    <button onClick={toggleTheme} style={{ backgroundColor: theme.background }}>
      Toggle Theme
    </button>
  );
}

function Content() {
  return (
    <div>
      <ThemeTogglerButton />
    </div>
  );
}

export default function App() {
  const [theme, setTheme] = React.useState(themes.light);
  function toggleTheme() {
    theme === themes.dark ? setTheme(themes.light) : setTheme(themes.dark);
  }
  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      <Content />
    </ThemeContext.Provider>
  );
}

https://codesandbox.io/s/nko6l15xpl

[piotrwitek]

Yeah, looks good.

I was thinking to split the example in 2 files.

• In first file please add a component example that is using Context API (we will use that later for a Context API examples)
  Basically this (NOTE: types need improvements):

NOTE: put all these files under the `playground/src/context` folder
// theme-context.tsx

type Theme = {
  foreground: string;
  background: string;
}

type Themes = {
  light: Theme;
  dark: Theme;
}

const themes: Themes = {
  light: {
    foreground: "#000000",
    background: "#eeeeee"
  },
  dark: {
    foreground: "#ffffff",
    background: "#222222"
  }
};

type ThemeContextProps = {
	theme: Theme,
	toggleTheme: (themes: Themes) => Theme,
};

export const ThemeContext = React.createContext<ThemeContextProps>({
  theme: themes.dark,
  toggleTheme: () => {}
});


// theme-provider.tsx

export const ThemeProvider: FC<{}> = ({children, themes}) => {
  const [theme, setTheme] = React.useState(themes.light);

  const toggleTheme = () => {
    theme === themes.dark ? setTheme(themes.light) : setTheme(themes.dark);
  }
 
  return (
	<ThemeContext.Provider value={{toggleTheme}}>
      {this.props.children}
    </ThemeContext.Provider>
  );
}

// theme-consumer.tsx

function ThemeToggleButton() {
  return (
    <ThemeContext.Consumer>
      {({theme, toggleTheme}) => (
        <button onClick={toggleTheme} style={{ backgroundColor: theme.background }}>
          Toggle Theme
        </button>
      )}
    <ThemeContext.Consumer>
  );
}

• second file will reuse above context components for use-theme-context example

// use-theme-context.tsx

function ThemeToggleButton() {
  const { theme, toggleTheme } = React.useContext(ThemeContext);

  return (
    <button onClick={toggleTheme} style={{ backgroundColor: theme.background }}>
      Toggle Theme
    </button>
  );
}

export default function App() {
  return (
    <ThemeProvider>
      <ThemeToggleButton />
    </ThemeProvider>
  );
}

[sosukesuzuki]

@piotrwitek Sorry, I have not understood you said...
I should improve the example, right?

[piotrwitek]

Sure, what I meant is that the example is too big when presented in a single file form. Just split useContext example into two separate files, as it is laid out in my comment above (btw. I updated the code).

Note that in fact we already have this example that I added long time ago, will need a bit or refactoring: https://github.com/piotrwitek/react-redux-typescript-guide/blob/master/playground/src/context/theme-provider.tsx

[sosukesuzuki]

@piotrwitek Thanks! I understood.
Can I create the PR which add the example for useContext? (And I want to be reviewed by you in the PR.)
Or, Should we discuss in this issue?

[piotrwitek]

@sosukesuzuki that's great, please go for it!
I'll review in the PR, it'll be better to keep the discussion in there.