react-dropdown-animated/dist/App.js

A customizable dropdown menu button with simple animations for React. For those who like a little animation on your React app for some *pizzaz*.

import { useState } from 'react';
import './App.css';
import DropdownButton from './components/main/DropdownButton';
let option = 2;

function App() {
  const [buttonValue, setButtonValue] = useState('My button');

  const somethingHandler = event => {
    console.log('Something was clicked!');
  };

  const anotherThingHandler = event => {
    console.log('Another thing was clicked!');
  };

  const [options, setOptions] = useState([{
    content: 'Do something',
    onClick: somethingHandler
  }, {
    content: 'Do another thing',
    onClick: anotherThingHandler
  }, {
    content: 'Something else entirely',
    onClick: anotherThingHandler
  }]);

  const buttonChangeHandler = event => {
    setButtonValue(event.target.value);
  };

  const addOptionHandler = event => {
    option += 1;
    setOptions(options => [...options, {
      content: 'Option ' + option
    }]);
  };

  return /*#__PURE__*/React.createElement("div", {
    className: "App",
    style: {
      display: 'flex',
      flexDirection: 'column',
      justifyContent: 'space-around',
      alignItems: 'center',
      width: '100%',
      height: '70vh',
      marginTop: '5rem'
    }
  }, /*#__PURE__*/React.createElement(DropdownButton, {
    value: buttonValue ? buttonValue : 'My Button',
    options: options
  }), /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex',
      flexDirection: 'column'
    }
  }, "Button Value", /*#__PURE__*/React.createElement("input", {
    value: buttonValue,
    onChange: buttonChangeHandler,
    type: "text"
  }), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("button", {
    onClick: addOptionHandler
  }, "Add Option")));
}

export default App;