Exciting news!Announcing our $4.6M Series Seed. Learn more
Socket
LoveBlogFAQ
Install
Log in

react-overlay-component

Package Overview
Dependencies
0
Maintainers
1
Versions
3
Issues
File Explorer

Advanced tools

react-overlay-component

npm package to render overlay/modal with backdrop

    1.0.2latest

Version published
Maintainers
1
Yearly downloads
13,930
increased by111.45%

Weekly downloads

Readme

Source

release open-issues Test Status Build Status license

react-overlay-component

renders an overlay/modal.

Install

npm install --save react-overlay-component

Usage

import React, { useState } from "react"; import Overlay from "react-overlay-component"; function App() { const [isOpen, setOverlay] = useState(false); const closeOverlay = () => setOverlay(false); const configs = { animate: true, // top: `5em`, // clickDismiss: false, // escapeDismiss: false, // focusOutline: false, }; return ( <div> <button className="primary" onClick={() => { setOverlay(true); }} > open modal </button> <Overlay configs={configs} isOpen={isOpen} closeOverlay={closeOverlay}> <h2>Sample header</h2> <p>text content</p> <button className="danger" onClick={() => { setOverlay(false); }} > close modal </button> </Overlay> </div> ); }

Demo

View demos: https://binodswain.github.io/react-overlay-component/

or

git clone [email protected]:binodswain/react-overlay-component.git cd react-overlay-component # build the package npm install npm build # run example cd example npm install npm start

Props

react-overlay-component requires isOpen, configs(optional), closeOverlay(optional) as props.

proptypeoptionaldescription
isOpenbooleanfalseflag to toggle the overlay
configsobjecttrueconfig object to customize overlay behavior
closeOverlayfunctiontruefunction that sets isOpen to false

configs

const configs = { animate: true, top: `5em`, clickDismiss: false, escapeDismiss: false, focusOutline: true, contentClass: "container overlay-content", };
keytypeoptionaldefault valdescription
animatebooleantruetruetoggles overlay animation
topstringtrue0top value for overlay
clickDismissbooleantruetrueenables to close the overlay on clicking backdrop
escapeDismissbooleantruetrueenables to close the overlay on pressing ESC key
focusOutlinebooleantruefalseaddes an outline around the overlay-content div
contentClassstringtrue''additional class to add in overlay-content div

License

MIT © binodswain

Keywords

Socket

Product

Subscribe to our newsletter

Get open source security insights delivered straight into your inbox. Be the first to learn about new features and product updates.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc