Context Modal.js

// Context file
export const MyContext = createContext(null);

// Provider abstraction file
import { MyContext } from './context';

export const ProviderAbstraction = ({ children }) => {
  const [modalState, setModalState] = useState(false);
  
  return (
    <MyContext value={ modalIsOpen: modalState, openModal: () => setModalState(true), closeModal: () => setModalState(false) }>
      {children}
    </MyContext>
  );  
}

// Component or hook
import { MyContext } from './context';

export const MyComponent = () => {
  const { openModal } = useContext(MyContext);
  
  return (<button onClick={openModal}>Open modal!</button>)
}
          
// OG Component
import { MyContext } from './context';

const Parent = () => (
  <MyContext.Consumer>
    {({ openModal }) => (<button onClick={openModal}>Open modal!</button>)}
  </MyContext.Consumer>
);