React context provider example

[cjmling]

BELOW FOR BETTER EXAMPPLE

https://stackoverflow.com/a/54738889/507203

const { createContext, useContext, useState } = React;

const ThemeContext = createContext(null);

function Content() {
  const { style, visible, toggleStyle, toggleVisible } = useContext(
    ThemeContext
  );

  return (
    <div>
      <p>
        The theme is <em>{style}</em> and state of visibility is
        <em> {visible.toString()}</em>
      </p>
      <button onClick={toggleStyle}>Change Theme</button>
      <button onClick={toggleVisible}>Change Visibility</button>
    </div>
  );
}

function App() {
  const [style, setStyle] = useState("light");
  const [visible, setVisible] = useState(true);

  function toggleStyle() {
    setStyle(style => (style === "light" ? "dark" : "light"));
  }
  function toggleVisible() {
    setVisible(visible => !visible);
  }

  return (
    <ThemeContext.Provider
      value={{ style, visible, toggleStyle, toggleVisible }}
    >
      <Content />
    </ThemeContext.Provider>
  );
}

ReactDOM.render(<App />, document.getElementById("root"));

React context provider example

[cjmling]

import React, { createContext, ReactNode, useContext, useState } from 'react'

context.tsx

interface ReviewContext {
  isReviewOwner: (address: string, shortenAddress: string) => boolean
  reviewFilter: any
  setReviewFilter: React.Dispatch<React.SetStateAction<{}>>
}

const ReviewContext = createContext<ReviewContext | null>(null)

const ReviewProvider = ({ children }: { children: ReactNode }) => {
  const [reviewFilter, setReviewFilter] = useState({})

  const isReviewOwner = (address: string, shortenAddress: string) => {
    if (getShortenAddress(address) === shortenAddress) {
      return true
    }

    return false
  }

  return (
    <ReviewContext.Provider
      value={{
        isReviewOwner,
        reviewFilter,
        setReviewFilter,
      }}
    >
      {children}
    </ReviewContext.Provider>
  )
}

const useReview = () => {
  const context = useContext(ReviewContext)

  if (!context)
    throw new Error('ReviewContext must be placed within ReviewProvider')

  return context
}

export { ReviewContext, ReviewProvider, useReview }

index.tsx

import { ReviewProvider } from './context'
.
.
.
return (
  <ReviewProvider>
      <ReviewsSummary objectId={objectId} />
      // some other component
    </ReviewProvider>
)

review-summary.tsx

import { useReview } from './context'
.
.
.
const { isReviewOwner, reviewFilter, setReviewFilter } = useReview()

Then you can useEffect to listen to change of reviewFilter and update/reload any component.