React - jak zrobić lewostronne animowane menu

W tym krótkim artykule chcielibyśmy pokazać, jak stworzyć animowane menu w React .

Poniższe rozwiązanie pokazuje animowane menu wysuwające się z lewej strony po naciśnięciu przycisku.

Praktyczny przykład:

// ONLINE-RUNNER:browser;

// Uwaga: Odkomentuj wiersze importu podczas pracy z kompilatorem JSX.
// import React from 'react';
// import ReactDOM from 'react-dom';

const commonStyle = {
    position: 'fixed',
    left: 0,
    top: 0,
    bottom: 0,
    background: 'silver',
    overflow: 'hidden',
    transition: '0.3s'
};
const visibleStyle = {
    ...commonStyle,
    width: '200px'
};
const hiddenStyle = {
    ...commonStyle,
    width: '0px'
};

const App = () => {
    const [visible, setVisible] = React.useState(false);
    return (
      <div style={{height: '200px'}}>
        {!visible && <button onClick={() => setVisible(true)}>Pokaż</button>}
        <div style={visible ? visibleStyle : hiddenStyle}>
          <button onClick={() => setVisible(false)}>Ukryj</button>
          <div>
            1<br />
            2<br />
            3<br />
          </div>
        </div>
      </div>
    );
};

const root = document.querySelector('#root');
ReactDOM.render(<App />, root );

Uwaga:

Dzięki składni rozwinięcia ( ...) możemy łączyć obiekty powstałe z obiektów stylów.

Powiązane posty

• React - jak zrobić lewostronne animowane menu