"Stebenwolf's React Modal package [OC P14]"
npm install --save @stebenwolf/react-modal
NB: you might need to force the installation with
npm install @stebenwolf/react-modal --force
This package is quite straightforward: once you launch it, it displays a modal. The modal is made of 3 elements:
- a background
- the modal itself
- a close button
Each element has its own default style but you can completely customize and overwrite the style of each element via the following optional props:
- customBackStyle: customize the background (default: dark semi-transparent background that covers the page behind the modal)
- customModalStyle: customize the modal (default: a white rectangle)
- customCloseStyle: customize the close button (default: a classic "x" positionned at the top right)
Inside the modal you can put any content you wish, via the content
props.
import React from 'react'
import MyComponent from '@stebenwolf/react-modal'
export default function Example {
return (
<MyComponent
content={<AnythingYouWant />}
customBackStyle={{}}
customModalStyle={{}}
customCloseStyle={{}}
/>
)
}
MIT © stebenwolf