rayon
Rayon is a simple react modal component.
npm install --save rayon
Usage
main.scss
; // Base modal styles ; // Rayon modal theme
ParentComponent.js
;const ParentComponent = React;
React Properties
isOpen
isOpen
takes a boolean value that determines whether or not the modal should be visible. Often this will be stored in the parent component's state and passed to the Rayon model in the render method.
See the default example for how to use the isOpen
property.
onClose
onClose
takes a function that is called each time the escape key is pressed while the Rayon modal is open. Pass in your own function that handles closing the modal.
See the default example for how to use the onClose
property.
clickToClose
clickToClose
takes a boolean. If true, users will be able to click on the background of the modal to close it. If false, that functionality will be disabled. Defaults to true.
See the disable click example for how to use the clickToClose
property.
escapeToClose
escapeToClose
takes a boolean. If true, users will be able to press the escape key to close the modal. If false, that functionality will be disabled. Defaults to true.
See the disable escape example for how to use the escapeToClose
property.
bodyClass
bodyClass
takes a string. If bodyClass
is specified, every time the modal is opened, the specified class will be added to the body element of the page. Every time the modal is closed, the class will be removed. This is particularly useful for fixing the background when a modal is open.
See the fixed background example for an example of how to use the bodyClass
property.