/Javascript/React/Modal react form table

Modal react form table

import React from 'react';
import ReactDOM from 'react-dom';
import Modal from 'react-modal';

const customStyles = {
  content : {
    top                   : '50%',
    left                  : '50%',
    right                 : 'auto',
    bottom                : 'auto',
    marginRight           : '-50%',
    transform             : 'translate(-50%, -50%)'
  }
};

// Make sure to bind modal to your appElement (http://reactcommunity.org/react-modal/accessibility/)
Modal.setAppElement('#yourAppElement')

function App(){
  var subtitle;
  const [modalIsOpen,setIsOpen] = React.useState(false);
  function openModal() {
    setIsOpen(true);
  }

  function afterOpenModal() {
    // references are now sync'd and can be accessed.
    subtitle.style.color = '#f00';
  }

  function closeModal(){
    setIsOpen(false);
  }

    return (
      <div>
        <button onClick={openModal}>Open Modal</button>
        <Modal
          isOpen={modalIsOpen}
          onAfterOpen={afterOpenModal}
          onRequestClose={closeModal}
          style={customStyles}
          contentLabel="Example Modal"
        >

          <h2 ref={_subtitle => (subtitle = _subtitle)}>Hello</h2>
          <button onClick={closeModal}>close</button>
          <div>I am a modal</div>
          <form>
            <input />
            <button>tab navigation</button>
            <button>stays</button>
            <button>inside</button>
            <button>the modal</button>
          </form>
        </Modal>
      </div>
    );
}

ReactDOM.render(<App />, appElement);

Source: github.com

Similar codes

2 votes353 views1 answer
How to import lodash in react
Javascript React
0 vote337 views1 answer
React app link description preview
Javascript React
0 vote337 views2 answers
React native modal dismiss keyboard
Javascript React
7 votes284 views1 answer
React Hook "React.useState" is called in function "placeItem" which is neither a React function component or a custom React Hook function react-hooks/rules-of-hooks
Javascript React
18 votes323 views6 answers
React native release apk command
Javascript React
0 vote336 views1 answer
ERROR TypeError: undefined is not an object (evaluating '_reactNative.Styles.m aincont')
Javascript React
3 votes333 views1 answer
White screen issue in react native splashscreen
Javascript React
0 vote336 views1 answer
React-data-table-component edit action
Javascript React
30 votes339 views5 answers
Use effect react
Javascript React
11 votes349 views3 answers
Reactjs get url query params as object
Javascript React