{"id":37514227,"url":"https://github.com/emanuelecaurio/react-fade-modal","last_synced_at":"2026-01-16T08:05:46.317Z","repository":{"id":64935007,"uuid":"579751968","full_name":"emanuelecaurio/react-fade-modal","owner":"emanuelecaurio","description":"Responsive and customizable modal with fade effect","archived":false,"fork":false,"pushed_at":"2022-12-28T18:42:53.000Z","size":363,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-02T08:52:29.539Z","etag":null,"topics":["modal","react","react-dialog","react-fade-modal","react-modal","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/emanuelecaurio.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-12-18T19:53:31.000Z","updated_at":"2023-03-04T01:45:41.000Z","dependencies_parsed_at":"2023-01-31T07:15:44.951Z","dependency_job_id":null,"html_url":"https://github.com/emanuelecaurio/react-fade-modal","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"purl":"pkg:github/emanuelecaurio/react-fade-modal","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/emanuelecaurio%2Freact-fade-modal","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/emanuelecaurio%2Freact-fade-modal/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/emanuelecaurio%2Freact-fade-modal/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/emanuelecaurio%2Freact-fade-modal/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/emanuelecaurio","download_url":"https://codeload.github.com/emanuelecaurio/react-fade-modal/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/emanuelecaurio%2Freact-fade-modal/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28478047,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-16T06:30:42.265Z","status":"ssl_error","status_checked_at":"2026-01-16T06:30:16.248Z","response_time":107,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["modal","react","react-dialog","react-fade-modal","react-modal","typescript"],"created_at":"2026-01-16T08:05:45.734Z","updated_at":"2026-01-16T08:05:46.300Z","avatar_url":"https://github.com/emanuelecaurio.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Fade Modal\n\u003cimg alt=\"npm bundle size\" src=\"https://img.shields.io/bundlephobia/min/react-fade-modal\"\u003e \u003cimg alt=\"Snyk Vulnerabilities for npm package\" src=\"https://img.shields.io/snyk/vulnerabilities/npm/react-fade-modal\"\u003e\n\nResponsive react modal with fade in-out effect included without any external libraries.\n\n**works with**: `React \u003e= 16.8`\n## Motivation\nMost famous react modals refers to real DOM. \u003cbr/\u003e\nThis modal is 100% purely made using virtual DOM instead.\n\u003cbr/\u003e\nAlso, you can customize the UI based on your needs without worrying about css conflicts, \nthanks to the `:where` css pseudo-class and `module.css`. \n\u003cbr/\u003e\nNot less important, [extreme small size](https://bundlephobia.com/package/react-fade-modal). \u003cbr/\u003e\n\n## Getting Started\n\nYou can install the module via `npm` or `yarn`:\n\n```sh\nnpm install react-fade-modal\n```\n\n```sh\nyarn add react-fade-modal\n```\n\n## Demo\n[Live Demo](https://react-fade-modal-demo.surge.sh/)\n\n## Usage\n### Basic example\n```js\nimport {Modal} from 'react-fade-modal'\n\nfunction App() {\n    const [isOpen, setIsOpen] = useState(false)\n    return (\n       \u003cdiv\u003e\n           \u003cp\u003e\n               \u003cdiv\u003eBasic example\u003c/div\u003e\n               \u003cbutton onClick={() =\u003e setIsOpen(true)}\u003eclick to open modal\u003c/button\u003e\n               {isOpen \u0026\u0026\n                   \u003cModal\n                       title={\"Title\"}\n                       setIsOpen={setIsOpen}\u003e\n                       \u003cdiv\u003e\n                           \u003cp\u003eModal content.\u003c/p\u003e\n                       \u003c/div\u003e\n                   \u003c/Modal\u003e\n               }\n           \u003c/p\u003e      \n       \u003c/div\u003e\n    );\n}\n```\nNote that `Modal` does not accept an `isOpen` prop. You must put the component into \na conditional wrap, so it will be unmounted and mounted every time the condition change.\n\n### ModalProvider Example\nSometimes, `Modal` does not render well when you are using in a complex nested DOM component.\n\nIn this case, it's better to use `ModalProvider` in order to ensure that the `Modal`\nis on top of the DOM and the graphic does not change:\n\n```js\nimport {ModalProvider} from 'react-fade-modal'\n\nfunction App() {\n    return (\n        \u003cModalProvider\u003e\n            \u003cPanel/\u003e\n        \u003c/ModalProvider\u003e\n    );\n}\n```\nIn this example, `App.js` render `\u003cPanel/\u003e` only. Let's call `useModalContext`:\n```js\nimport {useModalContext} from 'react-fade-modal'\n\nconst Panel = () =\u003e {\n    const {showModal} = useModalContext()\n    return \u003cp\u003e\n        {items.map(item =\u003e\n            \u003cButton onClick={() =\u003e {\n                showModal({\n                    title: 'Custom title',\n                    children: \u003cdiv\u003eYou can pass any component. This is the Item {item}\u003c/div\u003e,\n                    closeOnClickOutside: false\n                })\n            }}\u003e\n                item {item}\n            \u003c/Button\u003e)}\n    \u003c/p\u003e\n}\n```\nNote that I could also call the `context` inside any child of `\u003cPanel/\u003e`,\nthat's how the `context` work basically.\n\n`showModal` is a function that accept any `Modal` props. \nYou can pass props as object properties as shown in the example above.\n\nMore examples available on `demo/src/App.tsx`\n\n## Props\n\n|Name|Type|Default|Description|\n|:--|:--:|:-----:|:----------|\n|**setIsOpen**|\u003ccode\u003eFunction\u003c/code\u003e|`required`|Show the modal. Accept 1 boolean value|\n|**transitionDurationInMs**|\u003ccode\u003enumber\u003c/code\u003e|200|Transition duration in milliseconds. Used for fade in-out the Modal|\n|**title**|\u003ccode\u003estring\u003c/code\u003e|`''`|Title of the Modal|\n|**children**|\u003ccode\u003eReactNode\u003c/code\u003e|`undefined`|Any JSX Component|\n|**closeOnClickOutside**|\u003ccode\u003eboolean\u003c/code\u003e|`true`|If true, the Modal will closed when you click outside|\n|**containerCss**|\u003ccode\u003estring\u003c/code\u003e|`''`|Optional CSS Classes applied to Modal container. A grey background layer will be shown as default|\n|**modalCss**|\u003ccode\u003estring\u003c/code\u003e|`''`|Optional CSS classes applied to the Modal itself|\n|**modalStyle**|\u003ccode\u003eCSSProperties\u003c/code\u003e|`{}`|Optional `style` applied to the Modal itself|\n|**titleCss**|\u003ccode\u003estring\u003c/code\u003e|`''`|Optional CSS classes applied to the title|\n|**contentCss**|\u003ccode\u003estring\u003c/code\u003e|`''`|Optional CSS classes applied to the children|\n|**closeIconCss**|\u003ccode\u003estring\u003c/code\u003e|`''`|Optional CSS classes applied to the close icon|\n|**showCloseIcon**|\u003ccode\u003eboolean\u003c/code\u003e|`true`|If true, it will be rendered the default close icon|\n|**customCloseIcon**|\u003ccode\u003eReactElement\u003c/code\u003e|`undefined`|If not undefined, this component will be rendered instead of the default close icon|\n\n\u003cbr/\u003e\n\n## No CSS Conflicts\nEvery css classes used in this component are written into `module.css` file and\nwrapped into `:where` pseudo-class, which gives them 0 specificity,\nso you can override current css properties through your custom css classes.\n\u003cbr/\u003e\nMore about [:where pseudo-class](https://developer.mozilla.org/en-US/docs/Web/CSS/:where),\n[Specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity#how_is_specificity_calculated) and [the :where exception](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity#the_where_exception)\n\u003cbr/\u003e \nMore about [css modules](https://css-tricks.com/css-modules-part-1-need/)\n\n## Project Structure\nThe project includes a demo folder initialized with Create React App.\n\nWhen you run the command ```build``` from first-level ```package.json```, a ```dist``` and a ```lib``` folder will be generated.\n\nThe ```lib``` folder will be placed automatically into the demo project.\n\nYou can move into ```demo``` directory and ```start``` project from its own package.json script, just like any other Create React App.\n\n## Questions\n**🐛 Did you find any bugs? Cool!**\n\u003cbr/\u003e\nReport it in \"issues\" section under the label \"bug\" and I'll check it.\n\n**🚀 Do you have any questions or feature request? Nice!** \u003cbr/\u003e\nWrite it into \"issues\" section under the label \"enhancement\" and I'll check it.\n\n**⭐ Did you find this package useful and meet your requirements? Great!** \u003cbr/\u003e\nConsider to put a ⭐ into the GitHub project!\n\n## License\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Femanuelecaurio%2Freact-fade-modal","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Femanuelecaurio%2Freact-fade-modal","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Femanuelecaurio%2Freact-fade-modal/lists"}