react-gold-modal

Made with create-react-library

Install

npm install --save react-gold-modal

Usage

import React, { Component } from 'react'

import Modal from 'react-gold-modal'
import 'react-gold-modal/src/styles.scss'

const App = () => {
	const [openModal, setOpenModal] = useState(false);

 
		return <>
			<Modal
				display={openModal}
				title={'This is a modal'}
				description={'Click OK to close'}
				cancel={{
					text: 'OK',
					handler: () => setOpenModal(false),
				}}
			/>
		</>
}

Required Props

|Prop Name |Type |Description | |------------------|-------------------------|--------------------------------------------------| |display |bool (Default false) |Shows or hides the modal | |cancel |option object |The object for closing the modal |

Optional Props

|Prop Name |Type |Description | |--------------------|-------------------------|--------------------------------------------------| |options |List of option object |The object for closing the modal | |className |str |Any class to be added to all the options buttons (used for styling) | |overlayIsCancel |bool |If true, clicking the overlay will call the Cancel handler | |isVertical |bool (Default false) |If true, the options will be placed vertically | |title |str |Title text for the modal | |description |str |Description text for the modal | |body |any |The body content for the modal | |isLoading |bool (Default false) |If true, the body and actions will be replaced with a loading state | |loadingContent |obj |Content for the modal loading state |

Option object

option = {
	text: 'Yes', 
	handler: () => setModalOpen(false), 
	className: ''
};

License

MIT © lalodoble