{"id":13436318,"url":"https://github.com/chenjiahan/rodal","last_synced_at":"2025-05-15T06:03:07.456Z","repository":{"id":44705055,"uuid":"41522637","full_name":"chenjiahan/rodal","owner":"chenjiahan","description":"A React modal with animations.","archived":false,"fork":false,"pushed_at":"2023-08-01T03:02:04.000Z","size":1844,"stargazers_count":908,"open_issues_count":7,"forks_count":85,"subscribers_count":16,"default_branch":"master","last_synced_at":"2025-05-15T06:03:03.075Z","etag":null,"topics":["animation","dialog","modal","react"],"latest_commit_sha":null,"homepage":"https://chenjiahan.github.io/rodal/","language":"CSS","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/chenjiahan.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,"governance":null}},"created_at":"2015-08-28T02:34:00.000Z","updated_at":"2025-05-12T06:43:27.000Z","dependencies_parsed_at":"2023-09-29T08:51:35.617Z","dependency_job_id":null,"html_url":"https://github.com/chenjiahan/rodal","commit_stats":{"total_commits":157,"total_committers":23,"mean_commits":6.826086956521739,"dds":0.6624203821656052,"last_synced_commit":"73a4a746b0668d4d045f5aa4357064a041a78950"},"previous_names":[],"tags_count":25,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chenjiahan%2Frodal","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chenjiahan%2Frodal/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chenjiahan%2Frodal/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chenjiahan%2Frodal/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/chenjiahan","download_url":"https://codeload.github.com/chenjiahan/rodal/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254283336,"owners_count":22045140,"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":["animation","dialog","modal","react"],"created_at":"2024-07-31T03:00:46.640Z","updated_at":"2025-05-15T06:03:07.421Z","avatar_url":"https://github.com/chenjiahan.png","language":"CSS","funding_links":[],"categories":["Uncategorized","UI Components","Demos"],"sub_categories":["Uncategorized","Overlay","JBoss Data Virtualization"],"readme":"# Rodal [![Build Status](https://img.shields.io/travis/chenjiahan/rodal.svg?style=flat-square)](https://travis-ci.org/chenjiahan/rodal) [![NPM downloads](http://img.shields.io/npm/dm/rodal.svg?style=flat-square)](https://npmjs.org/package/rodal)\n\nA React modal with animations.  \n[Example](https://chenjiahan.github.io/rodal/)\n\n## Installation\n\n```bash\n# React 17 or 18\nnpm i rodal --save\n\n# React 15 or 16, install rodal v1\nnpm i rodal@1 --save\n```\n\n## Usage\n\n```javascript\nimport React from 'react';\nimport Rodal from 'rodal';\n\n// include styles\nimport 'rodal/lib/rodal.css';\n\nclass App extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = { visible: false };\n  }\n\n  show() {\n    this.setState({ visible: true });\n  }\n\n  hide() {\n    this.setState({ visible: false });\n  }\n\n  render() {\n    return (\n      \u003cdiv\u003e\n        \u003cbutton onClick={this.show.bind(this)}\u003eshow\u003c/button\u003e\n\n        \u003cRodal visible={this.state.visible} onClose={this.hide.bind(this)}\u003e\n          \u003cdiv\u003eContent\u003c/div\u003e\n        \u003c/Rodal\u003e\n      \u003c/div\u003e\n    );\n  }\n}\n```\n\n## Props\n\n| Property         | Type   | Default | Description                                          |\n| ---------------- | ------ | ------- | ---------------------------------------------------- |\n| width            | number | 400     | width of dialog                                      |\n| height           | number | 240     | height of dialog                                     |\n| measure          | string | px      | measure of width and height                          |\n| onClose          | func   | /       | handler called onClose of modal                      |\n| onAnimationEnd   | func   | /       | handler called onEnd of animation                    |\n| visible          | bool   | false   | whether to show dialog                               |\n| showMask         | bool   | true    | whether to show mask                                 |\n| closeOnEsc       | bool   | false   | whether close dialog when esc pressed                |\n| closeMaskOnClick | bool   | true    | whether close dialog when mask clicked               |\n| showCloseButton  | bool   | true    | whether to show close button                         |\n| animation        | string | zoom    | animation type                                       |\n| enterAnimation   | string | /       | enter animation type (higher order than 'animation') |\n| leaveAnimation   | string |         | leave animation type (higher order than 'animation') |\n| duration         | number | 300     | animation duration                                   |\n| className        | string | /       | className for the container                          |\n| customStyles     | object | /       | custom styles                                        |\n| customMaskStyles | object | /       | custom mask styles                                   |\n| id               | string | /       | id for dialog                                        |\n\n## Animation Types\n\n- zoom\n- fade\n- flip\n- door\n- rotate\n- slideUp\n- slideDown\n- slideLeft\n- slideRight\n\n## Other\n\n[Vue version](https://github.com/chenjiahan/vodal)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchenjiahan%2Frodal","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchenjiahan%2Frodal","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchenjiahan%2Frodal/lists"}