{"id":22106975,"url":"https://github.com/legitcode/modal","last_synced_at":"2025-05-07T09:46:58.149Z","repository":{"id":35644356,"uuid":"39918901","full_name":"Legitcode/modal","owner":"Legitcode","description":"a react modal that lets you easily customize the css","archived":false,"fork":false,"pushed_at":"2017-05-12T12:59:09.000Z","size":221,"stargazers_count":92,"open_issues_count":5,"forks_count":18,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-05-07T04:37:39.995Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://legitcode.github.io/modal/","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/Legitcode.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-07-29T22:14:49.000Z","updated_at":"2022-10-04T10:09:07.000Z","dependencies_parsed_at":"2022-08-08T10:01:24.507Z","dependency_job_id":null,"html_url":"https://github.com/Legitcode/modal","commit_stats":null,"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Legitcode%2Fmodal","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Legitcode%2Fmodal/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Legitcode%2Fmodal/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Legitcode%2Fmodal/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Legitcode","download_url":"https://codeload.github.com/Legitcode/modal/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252854336,"owners_count":21814669,"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":"2024-12-01T08:13:18.174Z","updated_at":"2025-05-07T09:46:58.129Z","avatar_url":"https://github.com/Legitcode.png","language":"JavaScript","readme":"## Simple React Modal\n\n## Install\n\n`npm install simple-react-modal`\n\n### Simple?\n\n~~~js\n\u003cModal show={this.state.show} onClose={this.close}\u003e\n  \u003cdiv\u003ehey, click outside of me to close me!\u003c/div\u003e\n\u003c/Modal\u003e\n~~~\n\n## Transitions\n\nCSS powered transitions!\n\nIn your css file have a transition for the opacity: `transition: 'opacity 1s ease-in'`, now all you do is add in the transition speed as a prop. In the css example I just gave, it's one second:\n\n~~~js\n\u003cModal show={this.state.show} onClose={this.close} transitionSpeed={1000}\u003e\n  \u003cdiv\u003ehey, click outside of me to close me!\u003c/div\u003e\n\u003c/Modal\u003e\n~~~\n\nNow the component will open with your transition, and wait to hide until it finishes! Don't like transitions? Leave out the prop and everything works the same.\n\n## Full Example\n\nAn incredibly simple modal dialog, because after writing [this post](http://reactjsnews.com/modals-in-react/), I found none of the ones listed let you easily overwrite the css!\n\n~~~js\nimport Modal, {closeStyle} from 'simple-react-modal'\n\nexport default class App extends React.Component{\n\n  constructor(){\n    super()\n    this.state = {}\n  }\n\n  show(){\n    this.setState({show: true})\n  }\n\n  close(){\n    this.setState({show: false})\n  }\n\n\n  render(){\n    return (\n      \u003cdiv\u003e\n      \u003ca onClick={this.show.bind(this)}\u003eOpen Modal\u003c/a\u003e\n      \u003cModal\n      className=\"test-class\" //this will completely overwrite the default css completely\n      style={{background: 'red'}} //overwrites the default background\n      containerStyle={{background: 'blue'}} //changes styling on the inner content area\n      containerClassName=\"test\"\n      closeOnOuterClick={true}\n      show={this.state.show}\n      onClose={this.close.bind(this)}\u003e\n\n      \u003ca style={closeStyle} onClick={this.close.bind(this)}\u003eX\u003c/a\u003e\n      \u003cdiv\u003ehey\u003c/div\u003e\n\n      \u003c/Modal\u003e\n      \u003c/div\u003e\n    )\n  }\n}\n~~~\n\n### props\n\n- `closeOnOuterClick`: If someone clicks outside of the modal when it's in focus, should it close? You choose. (bool)\n- `show`: true or false\n- `onClose`: when the modal is sending the close event (only happens is `closeOnOuterClick` is true)\n- `className`: this will allow you to completely change the default css located in the component.\n- `containerClassName`: change the class on the containing div\n\n- `containerStyle`: changes styles on the modal content area\n\nMinimum required props would be `show` and `onClose`. You can optionally pull in `closeStyle` to use the default close button.\n\n###Why this modal?\n\nThe big difference is that you can use the default style, overwrite just the things you want with the `style` or `containerStyle` props, or throw on a class name and completely style everything yourself.\n\nCustomizing the style via a css class is easy, to target the actual content area it will be `.your-class div`.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flegitcode%2Fmodal","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flegitcode%2Fmodal","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flegitcode%2Fmodal/lists"}