React Modal

Simple Modal working with React

• Installation
• Usage/Examples
• Props
  • Examples

Installation

Install react-modal with npm

npm i @fsmnk/react-modal

Back to top

Usage/Examples

import Modal from '@fsmnk/react-modal';

const App = () => {
  return (
    <div className="App">
      <Modal>
        <h1>Lorem ipsum</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </Modal>
    </div>
  );
};

export default App;

Back to top

Props

Name	Required	Default	Type	Example
title	no	undefined	string	Click
onOpen	no	undefined	function	Click
onClose	no	undefined	function	Click
onCreate	no	undefined	function	Click
onFocus	no	undefined	function	Click

Back to top

Props Examples

title

import Modal from '@fsmnk/react-modal';

const App = () => {
  return (
    <div className="App">
      <Modal title="Lorem ipsum">...</Modal>
    </div>
  );
};

export default App;

Back to top

onOpen

onOpen trigger when menu is opened

<Modal onOpen={() => console.log('onOpen')}>...</Modal>

Back to top

onClose

onClose trigger when menu is closed

<Modal onClose={() => console.log('onClose')}>...</Modal>

Back to top

onCreate

onCreate trigger when component is create

<Modal onCreate={() => console.log('onCreate')}>...</Modal>

Back to top

onFocus

onFocus trigger when input is focused

Back to top