react hooks context api code example

Example 1: useRef

/*
	A common use case is to access a child imperatively: 
*/

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

Example 2: react context api

DEFINITION::::::
Context provide a way to pass data through the component tree without 
having to pass down manually at every level

HOW TO USE::::::
DECLARATION:::
	const MyContext = React.createContext()
Creating a new Context for each unique piece of data that needs to be available
throughout your component data
	const LocaleContext = React.createContext()
Properties of LocaleContext --------
	LocaleContext.Provider
    LocaleContext.Consumer

What is a Provider 
	Allows us to "declare the data that we want available throughout our
	component tree"

What is a Consumer
	Allows "any component in the tree that needs that data to be able to 
    subscibe to it"

How to use Provider	
	<MyContext.Provider value={data}>
      <App />
    </MyContext.Provider>

Example 3: reactjs context api

==App.js========================================
import React from 'react';
import PageContextProvider from './PageContextProvider';
import Header from './Header';
function App() {
    return (
        <div className="App">
            <PageContextProvider>
                <Header />
            </PageContextProvider>
        </div>
    );
}
export default App;


==PageContextProvider.js=========================
import React, { useState, useEffect, createContext } from 'react';
export const PageContext = createContext();
const PageContextProvider = (props) => {
    const [user, setUser] = useState({
        'name': 'harry potter'
    });
    return (
        <PageContext.Provider value={{ 
            user: user,
        }}>
        	{props.children}
        </PageContext.Provider>
    );
}
export default PageContextProvider;


==Header.js=====================================
import React, { useContext } from 'react';
import { PageContext } from './PageContextProvider';
const Header = () => {
    const { user } = useContext(PageContext);
    return (
        <div className="header">
        	{user.name}
        </div>
    );
}
export default Header;

Example 4: usecontext hook

import React, { useContext } from "react";
import ColorContext from "./colorcontex.ts";

const MyComponent = () => {
  const colors = useContext(ColorContext);

  return <div style={{ backgroundColor: colors.blue }}>...</div>;
};import React, { useContext } from "react";

const MyComponent = () => {
  const colors = useContext(ColorContext);

  return <div style={{ backgroundColor: colors.blue }}>...</div>;
};

Example 5: usereducer hook

const initialState = {count: 0};

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return {count: state.count + 1};
    case 'decrement':
      return {count: state.count - 1};
    default:
      throw new Error();
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    <>
      Count: {state.count}
      <button onClick={() => dispatch({type: 'decrement'})}>-</button>
      <button onClick={() => dispatch({type: 'increment'})}>+</button>
    </>
  );
}