All Projects → jcoreio → Material Ui Popup State

jcoreio / Material Ui Popup State

Licence: mit
boilerplate for common Material-UI Menu, Popover and Popper use cases

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Material Ui Popup State

Tippyjs
Tooltip, popover, dropdown, and menu library
Stars: ✭ 9,433 (+4971.51%)
Mutual labels:  menu, popup, popover
React Express Webpack
React boilerplate with ES2015, Express.js, and Webpack 4
Stars: ✭ 84 (-54.84%)
Mutual labels:  boilerplate, material-ui
Fwpopupviewoc
信手拈来的OC弹窗库:1、继承 FWPopupBaseView 即可轻松实现各种位置、动画类型的弹窗;2、新功能引导弹窗。更多弹窗场景等你来挑战,总之,想怎么弹就怎么弹!!!
Stars: ✭ 70 (-62.37%)
Mutual labels:  menu, popup
Fable Elmish Electron Material Ui Demo
Complete boilerplate for Electron apps using Fable and Elmish with hot module reloading, time-travel debugging, etc.
Stars: ✭ 101 (-45.7%)
Mutual labels:  boilerplate, material-ui
Tippyjs React
React component for Tippy.js (official)
Stars: ✭ 1,081 (+481.18%)
Mutual labels:  menu, popover
Electron Tray Window
🖼️ Generates custom tray windows with Electron.js
Stars: ✭ 71 (-61.83%)
Mutual labels:  menu, popup
Customalertviewdialogue
Custom AlertView Dialogue is the world's most advanced alert view library. Custom AlertView Dialogue includes simple message popups, confirmation alerts, selector popups, action sheet bottom menus, and input/feedback contact forms.
Stars: ✭ 100 (-46.24%)
Mutual labels:  menu, popup
Ybpopupmenu
快速集成popupMenu
Stars: ✭ 816 (+338.71%)
Mutual labels:  menu, popup
Jxpopupview
一个轻量级的自定义视图弹出框架
Stars: ✭ 117 (-37.1%)
Mutual labels:  popup, popover
Razzle Material Ui Styled Example
Razzle Material-UI example with Styled Components using Express with compression
Stars: ✭ 117 (-37.1%)
Mutual labels:  boilerplate, material-ui
Storybook Addon
Develop themable components with Emotion/Styled Components/Material-UI with help of Storybook & React Theming
Stars: ✭ 122 (-34.41%)
Mutual labels:  boilerplate, material-ui
Veluxi Starter
Veluxi Vue.js Starter Project with Nuxt JS and Vuetify
Stars: ✭ 39 (-79.03%)
Mutual labels:  boilerplate, material-ui
Ftpopovermenu
FTPopOverMenu is a pop over menu for iOS which is maybe the easiest one to use. Supports both portrait and landscape. It can show from any UIView, any UIBarButtonItem and any CGRect.
Stars: ✭ 988 (+431.18%)
Mutual labels:  menu, popover
Fepopupmenucontroller
A simple, elegant pop-up menu view
Stars: ✭ 32 (-82.8%)
Mutual labels:  menu, popup
React Layer Stack
Layering system for React. Useful for popover/modals/tooltip/dnd application
Stars: ✭ 152 (-18.28%)
Mutual labels:  popup, popover
Gatsby Starter Procyon
An opinionated Gatsby starter designed for trash-eating pandas.
Stars: ✭ 88 (-52.69%)
Mutual labels:  boilerplate, material-ui
Popover
一款优雅易用的类似QQ和微信消息页面的右上角微型菜单弹窗
Stars: ✭ 732 (+293.55%)
Mutual labels:  menu, popover
Anylayer
Android稳定高效的浮层创建管理框架
Stars: ✭ 745 (+300.54%)
Mutual labels:  menu, popup
Cascade
Nested popup menus with smooth height animations
Stars: ✭ 1,493 (+702.69%)
Mutual labels:  menu, popup
React Popper Tooltip
A React hook to effortlessly build smart tooltips.
Stars: ✭ 149 (-19.89%)
Mutual labels:  render-props, popover

material-ui-popup-state

CircleCI Coverage Status semantic-release Commitizen friendly npm version

Takes care of the boilerplate for common Menu, Popover and Popper use cases.

Provides a Custom React Hook that keeps track of the local state for a single popup, and functions to connect trigger, toggle, and popover/menu/popper components to the state.

Also provides a Render Props Component that keeps track of the local state for a single popup, and passes the state and mutation functions to a child render function.

Table of Contents

Installation

npm install --save material-ui-popup-state

Examples with React Hooks

Menu

import * as React from 'react'
import Button from '@material-ui/core/Button'
import Menu from '@material-ui/core/Menu'
import MenuItem from '@material-ui/core/MenuItem'
import {
  usePopupState,
  bindTrigger,
  bindMenu,
} from 'material-ui-popup-state/hooks'

const MenuPopupState = () => {
  const popupState = usePopupState({ variant: 'popover', popupId: 'demoMenu' })
  return (
    <div>
      <Button variant="contained" {...bindTrigger(popupState)}>
        Open Menu
      </Button>
      <Menu {...bindMenu(popupState)}>
        <MenuItem onClick={popupState.close}>Cake</MenuItem>
        <MenuItem onClick={popupState.close}>Death</MenuItem>
      </Menu>
    </div>
  )
}

export default MenuPopupState

Popover

import React from 'react'
import PropTypes from 'prop-types'
import { withStyles } from '@material-ui/core/styles'
import Typography from '@material-ui/core/Typography'
import Button from '@material-ui/core/Button'
import Popover from '@material-ui/core/Popover'
import {
  usePopupState,
  bindTrigger,
  bindPopover,
} from 'material-ui-popup-state/hooks'

const styles = (theme) => ({
  typography: {
    margin: theme.spacing.unit * 2,
  },
})

const PopoverPopupState = ({ classes }) => {
  const popupState = usePopupState({
    variant: 'popover',
    popupId: 'demoPopover',
  })
  return (
    <div>
      <Button variant="contained" {...bindTrigger(popupState)}>
        Open Popover
      </Button>
      <Popover
        {...bindPopover(popupState)}
        anchorOrigin={{
          vertical: 'bottom',
          horizontal: 'center',
        }}
        transformOrigin={{
          vertical: 'top',
          horizontal: 'center',
        }}
      >
        <Typography className={classes.typography}>
          The content of the Popover.
        </Typography>
      </Popover>
    </div>
  )
}

PopoverPopupState.propTypes = {
  classes: PropTypes.object.isRequired,
}

export default withStyles(styles)(PopoverPopupState)

Popper

import React from 'react'
import PropTypes from 'prop-types'
import { withStyles } from '@material-ui/core/styles'
import Typography from '@material-ui/core/Typography'
import Button from '@material-ui/core/Button'
import Popper from '@material-ui/core/Popper'
import {
  usePopupState,
  bindToggle,
  bindPopper,
} from 'material-ui-popup-state/hooks'
import Fade from '@material-ui/core/Fade'
import Paper from '@material-ui/core/Paper'

const styles = (theme) => ({
  typography: {
    padding: theme.spacing.unit * 2,
  },
})

const PopperPopupState = ({ classes }) => {
  const popupState = usePopupState({ variant: 'popper', popupId: 'demoPopper' })
  return (
    <div>
      <Button variant="contained" {...bindToggle(popupState)}>
        Toggle Popper
      </Button>
      <Popper {...bindPopper(popupState)} transition>
        {({ TransitionProps }) => (
          <Fade {...TransitionProps} timeout={350}>
            <Paper>
              <Typography className={classes.typography}>
                The content of the Popper.
              </Typography>
            </Paper>
          </Fade>
        )}
      </Popper>
    </div>
  )
}

PopperPopupState.propTypes = {
  classes: PropTypes.object.isRequired,
}

export default withStyles(styles)(PopperPopupState)

React Hooks API

Bind Functions

material-ui-popup-state/hooks exports several helper functions you can use to connect components easily:

  • anchorRef: creates a ref function to pass to the anchorEl (by default, the currentTarget of the mouse event that triggered the popup is used; only use anchorRef if you want a different element to be the anchor).
  • bindMenu: creates props to control a Menu component.
  • bindPopover: creates props to control a Popover component.
  • bindPopper: creates props to control a Popper component.
  • bindTrigger: creates props for a component that opens the popup when clicked.
  • bindContextMenu: creates props for a component that opens the popup on when right clicked (contextmenu event).
  • bindToggle: creates props for a component that toggles the popup when clicked.
  • bindHover: creates props for a component that opens the popup while hovered. NOTE: See this guidance if you are using bindHover with Popover or Menu.
  • bindFocus: creates props for a component that opens the popup while hovered.

To use one of these functions, you should call it with the object returned by usePopupState and spread the return value into the desired element:

import * as React from 'react'
import Button from '@material-ui/core/Button'
import Menu from '@material-ui/core/Menu'
import MenuItem from '@material-ui/core/MenuItem'
import {
  usePopupState,
  bindTrigger,
  bindMenu,
} from 'material-ui-popup-state/hooks'

const MenuPopupState = () => {
  const popupState = usePopupState({ variant: 'popover', popupId: 'demoMenu' })
  return (
    <div>
      <Button variant="contained" {...bindTrigger(popupState)}>
        Open Menu
      </Button>
      <Menu {...bindMenu(popupState)}>
        <MenuItem onClick={popupState.close}>Cake</MenuItem>
        <MenuItem onClick={popupState.close}>Death</MenuItem>
      </Menu>
    </div>
  )
}

export default MenuPopupState

usePopupState

This is a Custom Hook that uses useState internally, therefore the Rules of Hooks apply to usePopupState.

usePopupState Props

variant ('popover' or 'popper', required)

Use 'popover' if your popup is a Popover or Menu; use 'popper' if your popup is a Popper.

Right now this only affects whether bindTrigger/bindToggle/bindHover return an aria-controls prop or an aria-describedby prop.

popupId (string, optional but strongly encouraged)

The id for the popup component. It will be passed to the child props so that the trigger component may declare the same id in an ARIA prop.

disableAutoFocus (boolean, optional)

If true, will not steal focus when the popup is opened. (And bindPopover/bindMenu) will inject disableAutoFocus, disableEnforceFocus, and disableRestoreFocus).

usePopupState return value

An object with the following properties:

  • open([eventOrAnchorEl]): opens the popup. You must pass in an anchor element or an event with a currentTarget, otherwise the popup will not position properly and you will get a warning; Material-UI needs an anchor element to position the popup.
  • close(): closes the popup
  • toggle([eventOrAnchorEl]): opens the popup if it is closed, or closes the popup if it is open. If the popup is currently closed, you must pass an anchor element or an event with a currentTarget, otherwise the popup will not position properly and you will get a warning; Material-UI needs an anchor element to position the popup.
  • setOpen(open, [eventOrAnchorEl]): sets whether the popup is open. If open is truthy, you must pass in an anchor element or an event with a currentTarget, otherwise the popup will not position properly and you will get a warning; Material-UI needs an anchor element to position the popup.
  • isOpen: true/false if the popup is open/closed
  • anchorEl: the current anchor element
  • setAnchorEl: sets the anchor element (the currentTarget of the triggering mouse event is used by default unless you have called setAnchorEl)
  • popupId: the popupId prop you passed to PopupState
  • variant: the variant prop you passed to PopupState

Examples with Render Props

Menu

import * as React from 'react'
import Button from '@material-ui/core/Button'
import Menu from '@material-ui/core/Menu'
import MenuItem from '@material-ui/core/MenuItem'
import PopupState, { bindTrigger, bindMenu } from 'material-ui-popup-state'

const MenuPopupState = () => (
  <PopupState variant="popover" popupId="demoMenu">
    {(popupState) => (
      <React.Fragment>
        <Button variant="contained" {...bindTrigger(popupState)}>
          Open Menu
        </Button>
        <Menu {...bindMenu(popupState)}>
          <MenuItem onClick={popupState.close}>Cake</MenuItem>
          <MenuItem onClick={popupState.close}>Death</MenuItem>
        </Menu>
      </React.Fragment>
    )}
    }
  </PopupState>
)

export default MenuPopupState

Popover

import React from 'react'
import PropTypes from 'prop-types'
import { withStyles } from '@material-ui/core/styles'
import Typography from '@material-ui/core/Typography'
import Button from '@material-ui/core/Button'
import Popover from '@material-ui/core/Popover'
import PopupState, { bindTrigger, bindPopover } from 'material-ui-popup-state'

const styles = (theme) => ({
  typography: {
    margin: theme.spacing.unit * 2,
  },
})

const PopoverPopupState = ({ classes }) => (
  <PopupState variant="popover" popupId="demoPopover">
    {(popupState) => (
      <div>
        <Button variant="contained" {...bindTrigger(popupState)}>
          Open Popover
        </Button>
        <Popover
          {...bindPopover(popupState)}
          anchorOrigin={{
            vertical: 'bottom',
            horizontal: 'center',
          }}
          transformOrigin={{
            vertical: 'top',
            horizontal: 'center',
          }}
        >
          <Typography className={classes.typography}>
            The content of the Popover.
          </Typography>
        </Popover>
      </div>
    )}
  </PopupState>
)

PopoverPopupState.propTypes = {
  classes: PropTypes.object.isRequired,
}

export default withStyles(styles)(PopoverPopupState)

Mouse Over Interaction

import React from 'react'
import PropTypes from 'prop-types'
import { withStyles } from '@material-ui/core/styles'
import Typography from '@material-ui/core/Typography'
import Popover from '@material-ui/core/Popover'
import PopupState, { bindHover, bindPopover } from 'material-ui-popup-state'

const styles = (theme) => ({
  popover: {
    pointerEvents: 'none',
  },
  paper: {
    padding: theme.spacing.unit,
  },
})

const HoverPopoverPopupState = ({ classes }) => (
  <PopupState variant="popover" popupId="demoPopover">
    {(popupState) => (
      <div>
        <Typography {...bindHover(popupState)}>
          Hover with a Popover.
        </Typography>
        <Popover
          {...bindPopover(popupState)}
          className={classes.popover}
          classes={{
            paper: classes.paper,
          }}
          anchorOrigin={{
            vertical: 'bottom',
            horizontal: 'center',
          }}
          transformOrigin={{
            vertical: 'top',
            horizontal: 'center',
          }}
          disableRestoreFocus
        >
          <Typography>The content of the Popover.</Typography>
        </Popover>
      </div>
    )}
  </PopupState>
)

HoverPopoverPopupState.propTypes = {
  classes: PropTypes.object.isRequired,
}

export default withStyles(styles)(HoverPopoverPopupState)

Popper

import React from 'react'
import PropTypes from 'prop-types'
import { withStyles } from '@material-ui/core/styles'
import Typography from '@material-ui/core/Typography'
import Button from '@material-ui/core/Button'
import Popper from '@material-ui/core/Popper'
import PopupState, { bindToggle, bindPopper } from 'material-ui-popup-state'
import Fade from '@material-ui/core/Fade'
import Paper from '@material-ui/core/Paper'

const styles = (theme) => ({
  typography: {
    padding: theme.spacing.unit * 2,
  },
})

const PopperPopupState = ({ classes }) => (
  <PopupState variant="popper" popupId="demoPopper">
    {(popupState) => (
      <div>
        <Button variant="contained" {...bindToggle(popupState)}>
          Toggle Popper
        </Button>
        <Popper {...bindPopper(popupState)} transition>
          {({ TransitionProps }) => (
            <Fade {...TransitionProps} timeout={350}>
              <Paper>
                <Typography className={classes.typography}>
                  The content of the Popper.
                </Typography>
              </Paper>
            </Fade>
          )}
        </Popper>
      </div>
    )}
  </PopupState>
)

PopperPopupState.propTypes = {
  classes: PropTypes.object.isRequired,
}

export default withStyles(styles)(PopperPopupState)

Render Props API

Bind Functions

material-ui-popup-state exports several helper functions you can use to connect components easily:

  • anchorRef: creates a ref function to pass to the anchorEl (by default, the currentTarget of the mouse event that triggered the popup is used; only use anchorRef if you want a different element to be the anchor).
  • bindMenu: creates props to control a Menu component.
  • bindPopover: creates props to control a Popover component.
  • bindPopper: creates props to control a Popper component.
  • bindTrigger: creates props for a component that opens the popup when clicked.
  • bindContextMenu: creates props for a component that opens the popup on when right clicked (contextmenu event).
  • bindToggle: creates props for a component that toggles the popup when clicked.
  • bindHover: creates props for a component that opens the popup while hovered. NOTE: See this guidance if you are using bindHover with Popover or Menu.
  • bindFocus: creates props for a component that opens the popup while hovered.

To use one of these functions, you should call it with the props PopupState passed to your child function, and spread the return value into the desired element:

import * as React from 'react'
import Button from '@material-ui/core/Button'
import Menu from '@material-ui/core/Menu'
import MenuItem from '@material-ui/core/MenuItem'
import PopupState, { bindTrigger, bindMenu } from 'material-ui-popup-state'

const MenuPopupState = () => (
  <PopupState variant="popover" popupId="demoMenu">
    {(popupState) => (
      <React.Fragment>
        <Button variant="contained" {...bindTrigger(popupState)}>
          Open Menu
        </Button>
        <Menu {...bindMenu(popupState)}>
          <MenuItem onClick={popupState.close}>Cake</MenuItem>
          <MenuItem onClick={popupState.close}>Death</MenuItem>
        </Menu>
      </React.Fragment>
    )}
  </PopupState>
)

export default MenuPopupState

PopupState Props

variant ('popover' or 'popper', required)

Use 'popover' if your popup is a Popover or Menu; use 'popper' if your popup is a Popper.

Right now this only affects whether bindTrigger/bindToggle/bindHover return an aria-controls prop or an aria-describedby prop.

popupId (string, optional but strongly encouraged)

The id for the popup component. It will be passed to the child props so that the trigger component may declare the same id in an ARIA prop.

disableAutoFocus (boolean, optional)

If true, will not steal focus when the popup is opened. (And bindPopover/bindMenu) will inject disableAutoFocus, disableEnforceFocus, and disableRestoreFocus).

children ((popupState: InjectedProps) => ?React.Node, required)

The render function. It will be called with an object containing the following props (exported as the InjectedProps type):

  • open([eventOrAnchorEl]): opens the popup
  • close(): closes the popup
  • toggle([eventOrAnchorEl]): opens the popup if it is closed, or closes the popup if it is open.
  • setOpen(open, [eventOrAnchorEl]): sets whether the popup is open.
  • isOpen: true/false if the popup is open/closed
  • anchorEl: the current anchor element
  • setAnchorEl: sets the anchor element (the currentTarget of the triggering mouse event is used by default unless you have called setAnchorEl)
  • popupId: the popupId prop you passed to PopupState
  • variant: the variant prop you passed to PopupState

Using Popover and Menu with bindHover

Material-UI's Modal (used by Popover and Menu) blocks pointer events to all other components, interfering with bindHover (the popover or menu will open when the mouse enters the bindHover element, but won't close when the mouse leaves). You can use the following components to work around this:

import Menu from 'material-ui-popup-state/HoverMenu'
import Popover from 'material-ui-popup-state/HoverPopover'

These are just wrapper components that pass inline styles to prevent Modal from blocking pointer events.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].