score:0
you can use a useeffect hook to close drawer after a timeout.
const allanchors = ['left', 'right', 'top', 'bottom'];
for(let anchor of allanchors) {
useeffect(() => {
if (state[anchor]) {
settimeout(() => {
toggledrawer(anchor, false)()
}, 2000); // close after 2000ms
}
}, [state[anchor]]);
}
i saw you're using anchor
variable, hinting that you might have multiple directions for drawer.
if that's not the case, you can modify code and remove the for-loop entirely.
here's a working example
const { usestate, useeffect } = react;
const { drawer, button } = materialui;
const app = (props) => {
const [ state, setstate ] = usestate({});
const allanchors = [ 'left', 'right', 'top', 'bottom' ];
for(let anchor of allanchors) {
useeffect(() => {
if (state[anchor]) {
settimeout(() => {
toggledrawer(anchor, false)()
}, 2000); // close after 2000ms
}
}, [state[anchor]]);
}
const toggledrawer = (anchor, open, data) => (event) => {
if (
// check if event is not undefined
event &&
event.type === "keydown" &&
(event.key === "tab" || event.key === "shift")
) {
return addproduct(data);
}
if( typeof open === 'undefined') open = !state[anchor]
setstate(s => ({ ...s, [anchor]: open }));
};
return (
<div>
{ allanchors.map(anchor =>
(
<react.fragment>
<button onclick={toggledrawer(anchor)} >
{anchor}
</button>
<drawer
anchor={anchor}
open={state[anchor]}
onclose={toggledrawer(anchor, false)}
>
this is drawer
</drawer>
</react.fragment>
))
}
</div>
)
}
reactdom.render(<app />, document.queryselector('#root'))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@material-ui/core@4.12.1/umd/material-ui.development.js"></script>
<div id="root" />
Source: stackoverflow.com
Related Query
- Set timeout on material UI drawer when open
- Material UI - Open LeftNav / Drawer on AppBar click
- How to get Material-UI Drawer to 'squeeze' other content when open
- How can I set a MenuItem as active in Drawer - Material UI?
- Material ui Textfield Hinttext overlap with with text when text is set with setState in react
- material-ui TextField Input not working when Drawer is open
- Material UI TextField label does not move up when the value for TextField is set porgramatically
- React material - getting TypeError: Cannot set property 'transition' of undefined when testing popper component
- How to set the background color of material ui drawer component with styled-components?
- Make material UI drawer stay the same size, instead of resizing when content size changes
- Material UI Drawer scrolls background page to top when opening
- How to set the width of Material UI drawer
- Prevent Auto Select of date when maxDate is set - Material UI React JS
- React + Material Design Lite - How to close navigation drawer when menu link is clicked?
- Material UI - Drawer does not open
- React - Enable background scrolling when Material UI Dialog is open
- How do you make the Material UI Mini Variant Drawer open by default on large screens?
- Scroll bar diappears when drawer is open in MUI v5 React
- How to set the props data in the state of material-ui dialog when the dialog open in react js
- Material UI Drawer component adding unwanted shadow when not focused
- How to set build .env variables when running create-react-app build script?
- react-select: how to keep dropdown open when styling in inspector?
- Set state when testing functional component with useState() hook
- React: Prevent scroll when modal is open
- What are the differences when re-rendering after state was set with Hooks compared to the class-based approach?
- How to set React to production mode when using Gulp
- MUI Drawer set background color
- When to use 'classes' vs 'className' with Material UI?
- Can't send a post request when the 'Content-Type' is set to 'application/json'
- React Material UI: How to give a button a custom color when disabled?
More Query from same tag
- Using a ref to get a size of a functional react component
- Warning: Invalid value for prop `dispatch` on <span> tag
- Reading excel file in Reactjs
- TransitionGroup and CssTransition: Exit transition not applied
- Can't figure out why my React Component isn't rendering?
- How to use hover to display the block from sibling parent
- How to call useEffect by updating values in a Context provider with react testing library?
- A weird error occurring when trying to implement useEffect
- React Translate two different fields in different languages
- Using a random color for an SVG being exported as a React Component
- Where does initialI18nStore come from with react-i18next
- displaying a result in render from a function in REACTJS
- Hide an option from material-ui autocomplete
- How to update input value when assigning onChange event in React?
- In react js this.state getting state of null in function
- Using higher order component in Typescript
- How to disable tab button for specific inputs in ReactJS?
- react fetch data and render the error if any
- Correct argument list syntax for className and css modules using BEM
- Trying to make a reuseable DataGrid component with my own defaults from ReactDataGrid, but Typescript giving me errors
- How to pass static data to react component from array
- how to bind data in reactjs form
- Error in App class when using React-Redux "connect "
- Running React app on Passanger
- Update Object with an array using React States
- How to listen to localstorage in react.js
- Apache 2.4 + React Router 4 always routing to my 404 page component
- Refs for dynamically generated components in React?
- Property 'value' does not exist on type 'EventTarget & HTMLSelectElement'
- React function not defined