/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

0 vote407 views1 answer
Sort by attribute in reactjs
Javascript React
40 votes385 views4 answers
What does useref do react
Javascript React
6 votes353 views3 answers
React native vector icons not working
Javascript React
0 vote380 views1 answer
Rn push notification No task registered for key ReactNativeFirebaseMessagingHeadlessTask
Javascript React
22 votes369 views4 answers
Shadow elevation react native
Javascript React
22 votes414 views4 answers
Reactjs copytoclipboard box
Javascript React
0 vote399 views1 answer
Package path ./react is not exported from package next-auth
Javascript React
0 vote425 views1 answer
React antd form disable submit button
Javascript React
0 vote387 views1 answer
React native import virtual path
Javascript React
0 vote407 views1 answer
Back press subscriptions i is not a function react native
Javascript React