Material Components React Menu Surface
npm install @whatoplay/react-menu-surfaceA React version of an MDC Menu Surface.
``
npm install @material/react-menu-surface
with Sass:
`js`
import '@material/react-menu-surface/index.scss';
with CSS:
`js`
import '@material/react-menu-surface/dist/menu-surface.css';
#### Anchored to Element
React Menu Surface accepts one child element. Please see the below example if you need to anchor the menu surface to a specific element. In this case, we wrapper
> NOTE: also has an onClose callback method prop, which is called when the menu closes. Use this as an opportunity to update your application's state.
`js
import React from 'react';
import MenuSurface, {Corner} from '@material/react-menu-surface';
import Button from '@material/react-button';
class MyApp extends React.Component {
state = {
open: false,
anchorElement: null,
};
setAnchorElement = (element) => {
if (this.state.anchorElement) {
return;
}
this.setState({anchorElement: element});
}
render() {
return (
ref={this.setAnchorElement}
>
anchorCorner={Corner.BOTTOM_LEFT}
onClose={() => this.setState({open: false})}
anchorElement={this.state.anchorElement}
>
src='http://images.my.photo.url' />
#### Anchored to Coordinates (right-click)You may want to anchor your menu surface to x, y coordinates. One example being a right-click contextmenu. Instead of passing an
you need to pass coordinates.
`js
import React from 'react';
import MenuSurface from '@material/react-menu-surface';class MyApp extends React.Component {
state = {
open: false,
coordinates: null,
};
componentDidMount() {
this.rightClickCallback_ = (evt) => {
this.setState({
open: true,
coordinates: {x: evt.clientX, y: evt.clientY},
});
evt.preventDefault();
};
window.addEventListener('contextmenu', this.rightClickCallback_);
}
componentWillUnmount() {
window.removeEventListener('contextmenu', this.rightClickCallback_);
}
render() {
return (
Menu Surface
onClose={() => this.setState({open: false, coordinates: null})}
coordinates={this.state.coordinates}
>
src='http://images.my.photo.url' />
);
}
}
`> NOTE: The React menu surface component is always hoisted to the body. This is one place the component differs from MDC Web's version, which gives the option of hoisting/not hoisting. Always hoisting the menu surface to the body allows fixes a few issues, and simplifies the component API.
Props
Prop Name | Type | Description
--- | --- | ---
className | String | Classes to be applied to the root element.
anchorCorner | Corner | Sets the corner that the menu surface will be anchored to. See MDC Web constants.js.
anchorElement | Element | Sets the anchor element used as an anchor for
positioning logic. Should contain class .mdc-menu-surface--anchor`.> * | AnchorMargin takes the form of {top: Number, bottom: Number , left: Number , right : Number}
Sass mixins may be available to customize various aspects of the components. Please refer to the
MDC Web repository for more information on what mixins are available, and how to use them.
Please see our Best Practices doc when importing or using icon fonts.