{"repo":"eBay/nice-modal-react","free":true,"listed":false,"github":"https://github.com/eBay/nice-modal-react","clone":"git clone https://github.com/eBay/nice-modal-react.git","description":"A modal state manager for React.","language":"TypeScript","stars":2295,"topics":["react","modal"],"license":"MIT","category":"ui-components","readme_excerpt":"Nice Modal A small, zero-dependency utility for managing modals in React. It uses context to persist modal state globally so that you can easily show/hide modals either by the modal component or by id. You can also see the introduction at eBay tech blog. Also check out another nice utility from us! nice-form-react! 😜 For example, you can use the code below to show a modal anywhere: Alternatively, you can register the modal with an id so that you don't need to import the modal component to use it: NOTE : @ebay/nice-modal-react is not a React modal component but should be used with other modal/dialog implementations by UI libraries like Material UI, Ant.Design, Bootstrap React, etc. Examples You can see a list of examples at: https://ebay.github.io/nice-modal-react Key Features Zero dependencies and small: 2kb after gzip. Uncontrolled. You can close the modal itself within the modal component. Decoupled. You don't have to import a modal component to use it. Modals can be managed by id. Your modal component code is not executed when it's invisible. Doesn't break the transitions when showing/hiding a modal. Promise-based. Besides using props to interact with the modal from the parent component, you can do it more easily with promises. Easy to integrate with any UI library. Motivation Using modals in React can be frustrating. Consider the scenario where you need to implement the UI below: The dialog is used to create a JIRA ticket. It could be shown from many places: the header, ","default_branch":null,"files":null,"tree":[],"storefront":"/r/eBay","claimed":false,"request_supported":{"post":"https://gitbuyer.com/r/eBay/nice-modal-react/request-supported","requests":0},"note":"indexed from public GitHub; nothing is for sale on this page. Clone it from GitHub. Paid listings live at /search."}