Milestones

[alex-cory]

1. Styling the Portal directly with props

const useModal = () => {
  const { isOpen, togglePortal, closePortal, Portal } = usePortal()

  const Modal = useCallback(({ style, ...props }) => {
    // this `isOpen` might be stale within here :/
    const styles = !isOpen ? {} : {
      position: 'fixed',
      left: '50%',
      top: '50%',
      transform: 'translate(-50%,-50%)',
      zIndex: 1000,
      ...styles
    }
    return <Portal {...props} style={styles} />
  }, [isOpen])

  return {
    Modal,
    toggleModal: togglePortal,
    closeModal: closePortal,
    isOpen
  }
}

2. stateless Portal

import { Portal } from 'react-useportal'

3. react-native support

[kunukn]

This is my approach to create a useModal hook using the usePortal currently.

Demo https://codesandbox.io/s/reactjs-usemodal-example-033fc