Set timeout on material UI drawer when open

Question

I would like to close the drawer after a specific time however I dont think material UI drawer has that kind of props. Is there a way to use transitionDuration to close the drawer or maybe add a setTimeout in my function ? When adding a timeout in my toggleDrawer function, it won't notice the timeout.

 
              
                
                  NOW NOW
                
              

              
                ×
              

              {/* {list(anchor)} */}
              

              
                YOUR SELECTION
                
                {cartItems.map((data) => (
                  
                    
                      {data.product_image && (
                        
                      )}
                    
                    
                      
                        {data.product_name.slice(0, 12)}
                        Ref:{data.product_details[1].TAILLE}
                        
                      
                    
                    €{data.product_price}
                  
                ))}
                
                
                  
                    TOTAL
                    {formatNumber(total)}
                  
                  
                    
                    
                      
                         {
                            return actions.order.create({
                              purchase_units: [
                                {
                                  amount: {
                                    value: total,
                                  },
                                },
                              ],
                            });
                          }}
                        />

Toggle drawer function

 const toggleDrawer = (anchor, open, data) => (event) => {
    if (
      event.type === "keydown" &&
      (event.key === "Tab" || event.key === "Shift")
    ) {
      return addProduct(data);
    }

    setState({ ...state, [anchor]: open });
  };

user_11218031 · Answer

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 (
  
  { allAnchors.map(anchor =>
    (
      
        
        
          This is Drawer
        
      
    ))
  }
  
  )
}

ReactDOM.render(, document.querySelector('#root'))

Set timeout on material UI drawer when open

1 Answers