{"id":13455677,"url":"https://github.com/yjose/reactjs-popup","last_synced_at":"2025-05-14T03:07:59.871Z","repository":{"id":28057550,"uuid":"114546060","full_name":"yjose/reactjs-popup","owner":"yjose","description":"React Popup Component - Modals,Tooltips and Menus —  All in one","archived":false,"fork":false,"pushed_at":"2024-07-22T20:20:58.000Z","size":7665,"stargazers_count":1811,"open_issues_count":94,"forks_count":209,"subscribers_count":20,"default_branch":"master","last_synced_at":"2025-04-02T01:11:37.024Z","etag":null,"topics":["component","modal","react","react-component","react-modal","react-popup","tooltip","tooltip-library"],"latest_commit_sha":null,"homepage":"https://react-popup.elazizi.com/","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/yjose.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":"FUNDING.yml","license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":null,"patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":"https://www.buymeacoffee.com/yjose"}},"created_at":"2017-12-17T15:10:18.000Z","updated_at":"2025-03-30T00:44:15.000Z","dependencies_parsed_at":"2024-01-13T17:48:02.818Z","dependency_job_id":"b0302eda-1741-4b30-97d6-8827a7b5967e","html_url":"https://github.com/yjose/reactjs-popup","commit_stats":{"total_commits":335,"total_committers":39,"mean_commits":8.58974358974359,"dds":"0.20895522388059706","last_synced_commit":"4d8e41a5995ba5074c0133bf0901bf0f93805616"},"previous_names":[],"tags_count":31,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yjose%2Freactjs-popup","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yjose%2Freactjs-popup/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yjose%2Freactjs-popup/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yjose%2Freactjs-popup/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yjose","download_url":"https://codeload.github.com/yjose/reactjs-popup/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247962594,"owners_count":21024870,"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":["component","modal","react","react-component","react-modal","react-popup","tooltip","tooltip-library"],"created_at":"2024-07-31T08:01:09.190Z","updated_at":"2025-04-09T02:13:08.418Z","avatar_url":"https://github.com/yjose.png","language":"TypeScript","funding_links":["https://www.buymeacoffee.com/yjose"],"categories":["TypeScript","Uncategorized"],"sub_categories":["Uncategorized"],"readme":"# Reactjs-popup\n\n## [⚠️ Looking for maintainers for reactjs-popup library](https://github.com/yjose/reactjs-popup/issues/332)\n\n[![Build Status][build-badge]][build]\n[![npm bundle size][npm-bundle-size]][build]\n[![version][version-badge]][package]\n[![downloads][downloads-badge]][npmtrends]\n\n[![MIT License][license-badge]][license]\n[![All Contributors](https://img.shields.io/badge/all_contributors-16-orange.svg?style=flat-square)](#contributors)\n[![PRs Welcome][prs-badge]][prs]\n[![Code of Conduct][coc-badge]][coc]\n\n[![Watch on GitHub][github-watch-badge]][github-watch]\n[![Star on GitHub][github-star-badge]][github-star]\n[![Tweet][twitter-badge]][twitter]\n\n[Reactjs-popup](https://react-popup.elazizi.com) is a simple react popup component that helps you create simple and complex Modals, tooltips, and Menus for your next React App.\n\nYou should consider using reactjs-popup for those couple of reasons :\n\n- **✅ Modal, Tooltip, Menu : All in one library 🏋️**\n- **✅ Very tiny library (3kb) ⚡️**\n- **✅ Fully accessible**\n- **✅ Function as children pattern to take control over your popup anywhere in your code 💪**\n- **✅ Easy to use 🚀**\n- **✅ TypeScript Support 👌**\n- **✅ IE Support. 🚀**\n- **✅ Full style customization 👌 (js, CSS, styled-components)**\n- **✅ Support for controlled Modals \u0026 Tooltips**\n- **✅ Default \u0026 Custom Animations**\n\n## Demo\n\nThis is a simple Demo to demonstrate how you can create Modals, Tooltips, Menus using `reactjs-popup`.\n\n[**Live Demo**](https://react-popup.elazizi.com)\n\n![ reactjs popup demo](https://user-images.githubusercontent.com/11137944/92184555-74556c00-ee49-11ea-81c5-eb2a0087e93a.gif)\n\n---\n\nSponsored by\n\n[![frigade-sponsor](https://github-production-user-asset-6210df.s3.amazonaws.com/11137944/266065760-a35a2e99-0a97-4d0d-982a-4c48bb2f1886.png)](https://frigade.com/?source=react-popup)\n\nReact-JS Popup is proud to be sponsored by [Frigade](https://frigade.com/?source=react-popup), a developer tool for building better product onboarding: guided tours, getting started checklists, announcements, and more.\n\n---\n\n## Installing / Getting started\n\nThis package is available in NPM repository as reactjs-popup. It will work correctly with all popular bundlers.\n\n```bash\nnpm install reactjs-popup --save\n```\n\nUsing yarn\n\n```bash\nyarn add reactjs-popup\n```\n\n## Include the Component\n\nTo start using reactjs popup you just need to import the component from the reactjs-popup package.\n\n```jsx\nimport React from 'react';\nimport Popup from 'reactjs-popup';\nimport 'reactjs-popup/dist/index.css';\n\nexport default () =\u003e (\n  \u003cPopup trigger={\u003cbutton\u003e Trigger\u003c/button\u003e} position=\"right center\"\u003e\n    \u003cdiv\u003ePopup content here !!\u003c/div\u003e\n  \u003c/Popup\u003e\n);\n```\n\n# Documentation\n\n- [Getting Started](https://react-popup.elazizi.com/)\n- [Modals, Tooltips, Menus examples ](https://react-popup.elazizi.com/react-modal)\n- [Custom Styling](https://react-popup.elazizi.com/css-styling)\n- [Controlled Components](https://react-popup.elazizi.com/controlled-popup)\n- [Animations](https://react-popup.elazizi.com/react-popup-animation)\n- [Migrating from V1 to V2 ](https://react-popup.elazizi.com/migrate-from-v1-to-v2)\n\n# Contributing\n\n### Clone Repo\n\nFork and then clone the repo\n\n    git clone git@github.com:your-username/reactjs-popup.git\n\n### Start Developing\n\nInstall all npm scripts:\n\n    npm install\n    or\n    yarn install\n\nwe use [storybook](https://storybook.js.org/) to build popup use cases.\n\nTo start storybook:\n\n```\nyarn storybook\n```\n\nRun Test in watch mode\n\n```\nyarn test\n```\n\nTo make contributing simply you need to create a new story for your use case under `stories` directory to demonstrate the new features or the bug fix .\n\nMake Changes 😀.\n\nIf you want to contribute check out the [help wanted](https://github.com/yjose/reactjs-popup/issues?q=is%3Aissue+is%3Aopen+label%3A%22help+wanted%22) issues for things that need fixing.\n\nBefore submitting a pull request run `npm run test` to run the unit tests .\n\n## Licensing\n\nThe code in this project is licensed under MIT license.\n\n# Show your support!\n\n## Sponsor\n\nif you are interested to Sponsor this library and list your logo in this section, [Make sure to contact me](https://twitter.com/ElaziziYoussouf).\n\n## Show Your Support\n\n\u003ca href=\"https://www.buymeacoffee.com/yjose\" target=\"_blank\"\u003e\n  \u003cimg\n    src=\"https://cdn.buymeacoffee.com/buttons/default-orange.png\"\n    alt=\"Buy Me A Coffee\"\n    height=\"40px\"\n  /\u003e\n\u003c/a\u003e\n\u003cbr /\u003e\n\nThat's all, thank you for your attention, please [![Star on GitHub][github-star-badge]][github-star] the repo to show your support.\n\nwe are all made of stars [![Star on GitHub][github-star-badge]][github-star]\n\n## Maintainers\n\n\u003ctable\u003e\n  \u003ctbody\u003e\n    \u003ctr\u003e\n      \u003ctd align=\"center\"\u003e\n        \u003ca href=\"http://elazizi.com/\"\u003e\n          \u003cimg width=\"150\" height=\"150\" src=\"https://github.com/yjose.png?v=3\u0026s=150\"\u003e\n          \u003c/br\u003e\n          Youssouf EL Azizi\n        \u003c/a\u003e\n        \u003cdiv\u003e\n          \u003ca href=\"https://twitter.com/ElaziziYoussouf\"\u003e\n            \u003cimg src=\"https://img.shields.io/twitter/follow/ElaziziYoussouf.svg?style=social\u0026label=Follow\" /\u003e\n          \u003c/a\u003e\n        \u003c/div\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n  \u003ctbody\u003e\n\u003c/table\u003e\n\n[build-badge]: https://img.shields.io/travis/yjose/reactjs-popup.svg?style=flat-square\n[npm-bundle-size]: https://img.shields.io/bundlephobia/minzip/reactjs-popup?style=flat-square\n[build]: https://travis-ci.org/yjose/reactjs-popup\n[version-badge]: https://img.shields.io/npm/v/reactjs-popup.svg?style=flat-square\n[package]: https://www.npmjs.com/package/reactjs-popup\n[downloads-badge]: https://img.shields.io/npm/dt/reactjs-popup.svg?style=flat-square\n[npmtrends]: http://www.npmtrends.com/reactjs-popup\n[license-badge]: https://img.shields.io/npm/l/reactjs-popup.svg?style=flat-square\n[license]: https://github.com/yjose/reactjs-popup/blob/master/LICENSE\n[prs-badge]: https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square\n[prs]: http://makeapullrequest.com\n[coc-badge]: https://img.shields.io/badge/code%20of-conduct-ff69b4.svg?style=flat-square\n[coc]: https://github.com/yjose/reactjs-popup/blob/master/CODE_OF_CONDUCT.md\n[github-watch-badge]: https://img.shields.io/github/watchers/yjose/reactjs-popup.svg?style=social\n[github-watch]: https://github.com/yjose/reactjs-popup/watchers\n[github-star-badge]: https://img.shields.io/github/stars/yjose/reactjs-popup.svg?style=social\n[github-star]: https://github.com/yjose/reactjs-popup/stargazers\n[twitter]: https://twitter.com/intent/tweet?text=Check%20out%20reactjs-popup%20by%20%40ElaziziYoussouf%20https%3A%2F%2Fgithub.com%2Fyjose%2Freactjs-popup%20%F0%9F%91%8D\n[twitter-badge]: https://img.shields.io/twitter/url/https/github.com/yjose/reactjs-popup.svg?style=social\n[all-contributors]: https://github.com/yjose/all-contributors\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyjose%2Freactjs-popup","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyjose%2Freactjs-popup","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyjose%2Freactjs-popup/lists"}