react-modal-lois-rama v1.0.3

react-modal-lois-rama

Repository link

• react-modal-lois-rama v1.0.3

Installation

To install, you can use npm or yarn:

$ npm i react-modal-lois-rama
$ yarn add react-modal-lois-rama

General Usage

Thes is the general use of the modal:

<Modal
    isOpen={isModalOpen} /* Boolean describing if the modal should be shown or not. */
    contentMessage={'Your message'} /* String that contains your modal message. */
    handleCloseModal={closeModal} /* Function that will be run when the modal is requested to be closed. */
    contentCloseBtn={'Close'} /* String that contains your close button message. */
/>

Example

Here is a simple example of the modal being used with some custom styles.

import React, {useState} from 'react';
import ReactDOM from 'react-dom';
import { Modal } from 'react-modal-lois-rama';

function App() {
	const [isModalOpen, setIsModalOpen] = useState(false);
  
	const openModal = () => {
		setIsModalOpen(true);
	};
	const closeModal = () => {
		setIsModalOpen(false);
	};
	const modalStyle = {
		background: {
			position: 'fixed',
			top: 0,
			left: 0,
			right: 0,
			bottom: 0,
			backgroundColor: 'grey',
		},
		modal: {
			position: 'absolute',
			top: '50%',
			left: '50%',
			transform: 'translate(-50%, -50%)',
			backgroundColor: 'lightgrey',
			padding: '15px 30px',
			borderRadius: '10px',
			display: 'flex',
			flexDirection: 'column',
			alignItems: 'center',
		},
		closeBtn: {
			marginTop: '18px',
		},
	};
	return (
    <>
    	<button type="button" className="btn" onClick={openModal}>
    		Open modal
    	</button>
    	<Modal
            isOpen={isModalOpen}
            contentMessage={'Your message'}
            handleCloseModal={closeModal}
            contentCloseBtn={'Close'}
            style={modalStyle}
		/>
    </>
	)
}

ReactDOM.render(
    <App />,
    document.getElementById('root')
);