{"id":29402599,"url":"https://github.com/rt2zz/react-dumb-modal","last_synced_at":"2025-07-10T17:32:20.376Z","repository":{"id":28325845,"uuid":"31838845","full_name":"rt2zz/react-dumb-modal","owner":"rt2zz","description":"a simpler modal","archived":false,"fork":false,"pushed_at":"2017-11-02T19:38:14.000Z","size":5,"stargazers_count":6,"open_issues_count":1,"forks_count":7,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-06-09T14:19:48.015Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rt2zz.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-03-08T04:54:42.000Z","updated_at":"2018-12-05T16:02:17.000Z","dependencies_parsed_at":"2022-08-01T13:37:47.604Z","dependency_job_id":null,"html_url":"https://github.com/rt2zz/react-dumb-modal","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/rt2zz/react-dumb-modal","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rt2zz%2Freact-dumb-modal","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rt2zz%2Freact-dumb-modal/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rt2zz%2Freact-dumb-modal/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rt2zz%2Freact-dumb-modal/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rt2zz","download_url":"https://codeload.github.com/rt2zz/react-dumb-modal/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rt2zz%2Freact-dumb-modal/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":264574888,"owners_count":23630783,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":[],"created_at":"2025-07-10T17:31:42.630Z","updated_at":"2025-07-10T17:32:20.361Z","avatar_url":"https://github.com/rt2zz.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Dumb Modal\nA simpler modal. A modal that is not self-aware.\n```js\nvar Modal = require('react-dumb-modal')\n\u003cModal dismiss={function(){/* handle the dismiss here */}} /\u003e\n```\nDumb Modals are always visible, hence being \"dumb\". Consequently you will need to control the visibility of the modal from the parent component. By moving all of the state out of the child component, it becomes easier to reason with. The same goes for any modal animations.\n\n**note:** the dismiss prop is a function that will be called when a user presses escape or clicks off of the modal. Assuming you want to allow the user to dismiss the modal, you should implement some logic here that toggle off the modal (either by removing it altogether or changing the style).\n\n## Usage\nSee props in the usage example below:\n```js\n\u003cModal\n  dismiss={function(){}}\n  overlayStyle={{background: 'rgba(0,0,0,.5)'}}\n  overlayClassName='overlay' //if you prefer to use css styling set a className here\n  modalStyle={{background: 'white'}}\n  modalClassName='modal' //className for the actual modal box\n  unstyled={true} //if true no default styles will be included\n  /\u003e\n```\n\n## Practical Example\n```js\nimport React, { Component } from 'react'\nimport Modal from 'react-dumb-modal'\n\nclass Page extends Component {\n  toggleModal = () =\u003e {\n    this.setState({showModal: !this.state.showModal})\n  }\n\n  render() {\n    return(\n      \u003cdiv\u003e\n        {this.state.showModal ? \u003cModal dismiss={this.toggleModal} /\u003e : null}\n      \u003c/div\u003e\n    )\n})\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frt2zz%2Freact-dumb-modal","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frt2zz%2Freact-dumb-modal","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frt2zz%2Freact-dumb-modal/lists"}