{"id":29822908,"url":"https://github.com/ctxhou/react-poppop","last_synced_at":"2025-07-29T01:12:13.628Z","repository":{"id":57342591,"uuid":"45897935","full_name":"ctxhou/react-poppop","owner":"ctxhou","description":"A mobile support and multi-directional modal for ReactJS","archived":false,"fork":false,"pushed_at":"2018-09-16T12:45:35.000Z","size":267,"stargazers_count":80,"open_issues_count":5,"forks_count":8,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-06-29T06:04:13.690Z","etag":null,"topics":["dialog","mobile","modal","popup","react","react-modal","react-poppop","responsive"],"latest_commit_sha":null,"homepage":"https://ctxhou.github.io/react-poppop/","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/ctxhou.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-11-10T08:22:35.000Z","updated_at":"2023-05-07T20:18:46.000Z","dependencies_parsed_at":"2022-09-16T02:50:30.717Z","dependency_job_id":null,"html_url":"https://github.com/ctxhou/react-poppop","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"purl":"pkg:github/ctxhou/react-poppop","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ctxhou%2Freact-poppop","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ctxhou%2Freact-poppop/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ctxhou%2Freact-poppop/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ctxhou%2Freact-poppop/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ctxhou","download_url":"https://codeload.github.com/ctxhou/react-poppop/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ctxhou%2Freact-poppop/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267613871,"owners_count":24115704,"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","status":"online","status_checked_at":"2025-07-28T02:00:09.689Z","response_time":68,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["dialog","mobile","modal","popup","react","react-modal","react-poppop","responsive"],"created_at":"2025-07-29T01:12:12.538Z","updated_at":"2025-07-29T01:12:13.616Z","avatar_url":"https://github.com/ctxhou.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Poppop\n\n\u003e A responsive, mobile support, multi directions and easy to use modal for ReactJS. \n\nCompatible with React 15 and 16.\n\n[![version](https://img.shields.io/npm/v/react-poppop.svg)](https://www.npmjs.com/package/react-poppop/)\n[![travis](https://travis-ci.org/ctxhou/react-poppop.svg?branch=master)](https://travis-ci.org/ctxhou/react-poppop)\n[![Build status](https://ci.appveyor.com/api/projects/status/y1a4ua5ld0gnl7wt?svg=true)](https://ci.appveyor.com/project/ctxhou/react-poppop)\n![david](https://david-dm.org/ctxhou/react-poppop.svg)\n[![codecov](https://codecov.io/gh/ctxhou/react-poppop/branch/master/graph/badge.svg)](https://codecov.io/gh/ctxhou/react-poppop)\n[![Maintainability](https://api.codeclimate.com/v1/badges/b1738dd58819561b4e25/maintainability)](https://codeclimate.com/github/ctxhou/react-poppop)\n![download](https://img.shields.io/npm/dm/react-poppop.svg)\n\n### [Demo](https://ctxhou.github.io/react-poppop/)\n\n![img](https://i.imgur.com/8HMXcOi.png)\n\n## Features\n\n* **Mobile support** — Responsive and support tap action.\n* **Multi directions** — support 9 positions. ↑ ↗ ︎→ ↘ ︎↓ ↙ ︎← ↖ ︎⥁\n* **Easily customize style**\n* **React v16 portal** — Using react v16 official portal API. Also backward compatible with v15\n\n## Table of Contents\n\n\u003c!-- toc --\u003e\n\n- [Installation](#installation)\n- [Usage](#usage)\n  * [Minimum Config](#minimum-config)\n  * [Multi directions - 9 positions](#multi-directions---9-positions)\n  * [Controllable](#controllable)\n- [Props](#props)\n- [License](#license)\n\n\u003c!-- tocstop --\u003e\n\n## Installation\n\nInstall it with npm.\n\n```js\nnpm install react-poppop --save\n```\n\nThen, import the module by module bundler like `webpack`, `browserify`\n\n```js\n// es6\nimport PopPop from 'react-poppop';\n\n// not using es6\nvar PopPop = require('react-poppop');\n```\n\nUMD build is also available. If you do this, you'll need to include the dependencies:\n\nFor example:\n\n```html\n\u003cscript src=\"https://unpkg.com/react@16.0.0/umd/react.production.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://unpkg.com/react-dom@16.0.0/umd/react-dom.production.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://unpkg.com/prop-types@15.6/prop-types.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://unpkg.com/react-poppop/dist/react-poppop.min.js\"\u003e\u003c/script\u003e\n```\n\nYou can reference [standalone.html](https://github.com/ctxhou/react-poppop/blob/master/docs/standalone.html) example.\n\n## Usage\n\n### Minimum Config\n\nThe miminum usage of `PopPop` is set open as `true`.\n\n```js\n\u003cPopPop open={true}\u003e\n  \u003ch1\u003eTitle\u003c/h1\u003e\n  \u003cp\u003eContent\u003c/p\u003e\n\u003c/PopPop\u003e\n```\n\n### Multi directions - 9 positions\n\nThe default position of `react-poppop` is `Top Center`.\n\nThere are 9 positions provided by `react-poppop`.\n\n`'topLeft', 'topCenter', 'topRight', 'centerLeft', 'centerCenter', 'centerRight', 'bottomLeft', 'bottomCenter', 'bottomRight'`\n\nSelect a position you want and pass it to `position` props.\n\n**Example**\n\n```js\n\u003cPopPop open={true}\n        position=\"topRight\"\u003e\n  \u003ch1\u003eTitle\u003c/h1\u003e\n  \u003cp\u003eContent\u003c/p\u003e\n\u003c/PopPop\u003e\n```\n\n### Controllable\n\nYou can set `onClose` callback, close by click `close button`, `esc button` and `overlay`.\n\n```js\nimport React, {Component} from 'react';\nimport PopPop from 'react-poppop';\n\nexport default class Example extends Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      show: false\n    }\n  }\n\n  toggleShow = show =\u003e {\n    this.setState({show});\n  }\n\n  render() {\n    const {show} = this.state;\n    return (\n      \u003cdiv\u003e\n        \u003cbutton className=\"btn btn-default\" onClick={() =\u003e this.toggleShow(true)}\u003eShow Modal\u003c/button\u003e\n        \u003cPopPop position=\"centerCenter\"\n                open={show}\n                closeBtn={true}\n                closeOnEsc={true}\n                onClose={() =\u003e this.toggleShow(false)}\n                closeOnOverlay={true}\u003e\n          \u003ch1\u003etitle\u003c/h1\u003e\n          \u003cp\u003e\n            content\n          \u003c/p\u003e\n        \u003c/PopPop\u003e\n      \u003c/div\u003e\n    )\n  }\n}\n```\n\n## Props\n\n`* means required`\n\n\u003ctable\u003e\n  \u003cthead\u003e\n    \u003ctr\u003e\n      \u003cth\u003eProps\u003c/th\u003e\n      \u003cth\u003eType\u003c/th\u003e\n      \u003cth\u003eDefault\u003c/th\u003e\n      \u003cth\u003eDescription\u003c/th\u003e\n    \u003c/tr\u003e\n  \u003c/thead\u003e\n  \u003ctbody\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eopen \u003cb\u003e*\u003c/b\u003e\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003ebool\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e\u003c/td\u003e\n      \u003ctd\u003eOpen the modal or not\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003ecloseBtn\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003ebool\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003efalse\u003c/td\u003e\n      \u003ctd\u003eWhether to show close button\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003ecloseOnOverlay\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003ebool\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003etrue\u003c/td\u003e\n      \u003ctd\u003eWhether to close modal on click overlay area\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003ecloseOnEsc\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003ebool\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003efalse\u003c/td\u003e\n      \u003ctd\u003eWhether to close modal when click `esc`\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eonClose\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003efunction\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e\u003c/td\u003e\n      \u003ctd\u003e\n        close modal callback\n      \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eposition\u003c/td\u003e\n      \u003ctd\u003e\n        \u003ccode\u003etopLeft\u003c/code\u003e\u003cbr/\u003e \n        \u003ccode\u003etopCenter\u003c/code\u003e\u003cbr/\u003e\n        \u003ccode\u003etopRight\u003c/code\u003e\u003cbr/\u003e\n        \u003ccode\u003ecenterLeft\u003c/code\u003e\u003cbr/\u003e\n        \u003ccode\u003ecenterCenter\u003c/code\u003e\u003cbr/\u003e\n        \u003ccode\u003ecenterRight\u003c/code\u003e\u003cbr/\u003e\n        \u003ccode\u003ebottomLeft\u003c/code\u003e\u003cbr/\u003e\n        \u003ccode\u003ebottomCenter\u003c/code\u003e\u003cbr/\u003e\n        \u003ccode\u003ebottomRight\u003c/code\u003e\n      \u003c/td\u003e\n      \u003ctd\u003etopCenter\u003c/td\u003e\n      \u003ctd\u003e\n        Modal position\n      \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eoverlayStyle\u003c/td\u003e\n      \u003ctd\u003e\n        \u003ccode\u003eobject\u003c/code\u003e\n      \u003c/td\u003e\n      \u003ctd\u003e\n        reference: \u003ca href=\"https://github.com/ctxhou/react-poppop/blob/master/src/style.js#L17-L25\"\u003elink\u003c/a\u003e\n      \u003c/td\u003e\n      \u003ctd\u003e\n        customize overlay style\n      \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003econtentStyle\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003eobject\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003ereference: \u003ca href=\"https://github.com/ctxhou/react-poppop/blob/master/src/style.js#L48-L58\"\u003elink\u003c/a\u003e\u003c/td\u003e\n      \u003ctd\u003ecustomize content style\u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/tbody\u003e\n\u003c/table\u003e\n\n## License\n\nMIT [@ctxhou](https://github.com/ctxhou)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fctxhou%2Freact-poppop","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fctxhou%2Freact-poppop","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fctxhou%2Freact-poppop/lists"}