{"id":21995864,"url":"https://github.com/andria-dev/react-spring-modal","last_synced_at":"2025-04-30T17:27:50.380Z","repository":{"id":40765701,"uuid":"184831537","full_name":"andria-dev/react-spring-modal","owner":"andria-dev","description":"Animatable and accessible modals built with react-spring","archived":false,"fork":false,"pushed_at":"2023-01-07T23:40:36.000Z","size":2440,"stargazers_count":34,"open_issues_count":21,"forks_count":8,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-22T14:42:49.291Z","etag":null,"topics":["animation","modals","react","react-spring","reactjs","transition","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/andria-dev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"github":"chrisbrownie55","patreon":null,"open_collective":null,"ko_fi":"chrisbrown","tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":null}},"created_at":"2019-05-03T23:25:30.000Z","updated_at":"2023-09-08T17:53:24.000Z","dependencies_parsed_at":"2023-02-08T03:31:29.177Z","dependency_job_id":null,"html_url":"https://github.com/andria-dev/react-spring-modal","commit_stats":null,"previous_names":["chrisbrownie55/react-spring-modal"],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andria-dev%2Freact-spring-modal","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andria-dev%2Freact-spring-modal/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andria-dev%2Freact-spring-modal/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andria-dev%2Freact-spring-modal/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/andria-dev","download_url":"https://codeload.github.com/andria-dev/react-spring-modal/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251750644,"owners_count":21637763,"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","modals","react","react-spring","reactjs","transition","typescript"],"created_at":"2024-11-29T21:18:54.768Z","updated_at":"2025-04-30T17:27:50.351Z","avatar_url":"https://github.com/andria-dev.png","language":"TypeScript","readme":"# Welcome to Animated Modals\n\nThis repository contains the packages **[react-spring-modal](https://github.com/ChrisBrownie55/react-spring-modal/blob/master/spring/)** and, in the future, **framer-motion-modal**. You can use the above links to view their READMEs.\n\n[![Example usage of CenterModal, ModalTitle, and ModalCloseTarget to make a \"confirmation\" modal](spring/assets/carbon.png)](https://github.com/ChrisBrownie55/react-spring-modal/blob/master/spring/)\n\n## Examples\n\nWe currently have two different examples showcasing `react-spring-modal`. If you have any examples of your own, please make a PR to add them if you feel comfortable doing so.\n\n- [CRA TypeScript example](https://github.com/ChrisBrownie55/react-spring-modal/blob/master/examples/typescript)\n- [Next.js SSR example](https://github.com/ChrisBrownie55/react-spring-modal/blob/master/examples/nextjs)\n\n## Contributing\n\nIf you would like to contribute, please read the following tips on getting you started and guidelines for PRs and such.\n\n### Tools\n\nI am using VS Code but you can use whatever editor you want or have access to. Please ensure that you do use the Prettier and ESLint setup though, whether that's through plugins in your editor or running `yarn format`. I am also using TypeScript in this project. It can be a pain sometimes but making sure your editor has a TypeScript service is very much advised.\n\nI also use `yarn` the package manager and its workspaces feature. If you're getting an issue with not being able to run the example it could be you need to re-run `yarn` to get the workspaces reinstall the packages into `node_modules/`. In the case of something else happening, feel free to open an issue about it.\n\nIf you have any tool recommendations I am open to suggestions but may not have the time to explore them. If you want to open a PR for stuff like that, you are welcome to.\n\n### Issues\n\nWhen writing an issue please be kind — I am only one person — and please attempt to **make your issue as reproducible** as possible. Specifically, I would recommend using an online service like CodeSandbox, if possible.\n\nWhen you write your issue, be as descriptive as possible so that I and others can easily tell what issue it is you're having. If you have any questions related to your issue, please ask them upfront as well so I or others may be able to get to them sooner.\n\nIf you're planning on fixing an issue, maybe even your own, please assign yourself to the issue first.\n\n### Pull Requests\n\nWhen making a pull request, if applicable, you should begin with it in \"Draft\" mode so that your progress on the PR can easily be tracked and reviews can be had more quickly. Before marking your PR ready for review, please double check your changes and your PR's wording. The wording in your PR should include something like \"fixes #12\", where the number is the number of the issue you are fixing, so that it will be automatically linked to the issue.\n\nIf you would like to review a PR, you are welcome to do so in a kind and respectful manner. When commenting on someone's code, only give constructive actionable feedback. The style of the code is decided by Prettier and ESLint so don't worry about that unless the pull requester forgot to use them.\n\nWhen reviewing someone's code, try to leave at least one positive note while you're at it too ♥.\n\n### General\n\nDiscriminatory comments (racism, sexism, transphobia, homophobia, etc), crude comments, or other comments that would make others feel unsafe are not welcome and you will be reported.\n\n## License\n\nLicense MIT © [Chris Brown](https://github.com/ChrisBrownie55)\n","funding_links":["https://github.com/sponsors/chrisbrownie55","https://ko-fi.com/chrisbrown"],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandria-dev%2Freact-spring-modal","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fandria-dev%2Freact-spring-modal","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandria-dev%2Freact-spring-modal/lists"}