Skip to content
React Popup Component - Modals,Tooltips and Menus —  All in one
JavaScript Other
Branch: master
Clone or download

Latest commit

yjose Merge pull request #164 from yjose/dependabot/npm_and_yarn/handlebars…
…-4.7.3

Bump handlebars from 4.1.2 to 4.7.3
Latest commit 1656b1f Mar 30, 2020

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.vscode update eslint config with prettier Feb 2, 2019
__test__ fix 16.9 warning Sep 4, 2019
docs Merge pull request #160 from yjose/dependabot/npm_and_yarn/docs/acorn… Mar 30, 2020
lib V 1.5.0 Sep 4, 2019
src fix: add scroll checkup on default open Mar 30, 2020
stories styles: remove redundant space Mar 30, 2020
.babelrc update babel config to fix test failed Dec 12, 2018
.bettercodehub.yml remove stories from bettercode control Apr 12, 2018
.eslintrc.js update dev deps Sep 4, 2019
.gitignore add support section Nov 16, 2019
.npmignore initial commit Dec 24, 2017
.nvmrc update netlify node version Sep 4, 2019
.travis.yml remove github-pages deploy Mar 11, 2018
CODE_OF_CONDUCT.md update Readme and contributing Guide Dec 26, 2017
CONTRIBUTING.md update contributing guide to parcel-story Apr 12, 2018
FUNDING.yml Create FUNDING.yml Jun 22, 2019
ISSUE_TEMPLATE.md update docs link Dec 5, 2018
LICENSE Initial commit Dec 17, 2017
README.md add support section Nov 16, 2019
build.js eslint fix part 4 Feb 3, 2019
jest.config.js eslint fix part 3 Feb 3, 2019
package-lock.json Bump handlebars from 4.1.2 to 4.7.3 Mar 30, 2020
package.json update dev deps Sep 4, 2019
yarn.lock Bump handlebars from 4.1.2 to 4.7.3 Mar 30, 2020

README.md

Reactjs-popup

Build Status version downloads MIT License

All Contributors PRs Welcome Code of Conduct

Watch on GitHub Star on GitHub Tweet

built with react Fragment : react 16 Tiny 3KB

Welcome

Reactjs-popup is a simple react popup component with a lot of benefits :

  • Built with react fragment that’s mean no additional wrapper Divs in your code or in the trigger element. 😮
  • Does not inject HTML outside your app root. 📦
  • Function as children pattern to take control over your popup anywhere in your code. 💪
  • Modal, Tooltip, Menu : All in one 🏋️
  • Full style customization 👌
  • Easy to use. 🚀
  • IE Support.🚀
  • TypeScript Support 👌
  • All these clocks in at around 3 kB zipped. ⚡️

Requires React >= 16.0

Demo

Live Demo

alt text

TO DO

  • Create repository && publish package
  • Create reactjs-popup Home page
  • Tooltip Support
  • Modal Support
  • Menu & Nested Menu Support
  • Add Live examples
  • Animation API
  • Toast Support
  • suggest a feature here

Installing / Getting started

This package is available in npm repository as reactjs-popup. It will work correctly with all popular bundlers.

npm install reactjs-popup --save

Using yarn

yarn add reactjs-popup -s

Include the Component

To start using reactjs popup you just need to import the component from the reactjs-popup package.

import React from "react";
import Popup from "reactjs-popup";

export default () => (
  <Popup trigger={<button> Trigger</button>} position="right center">
    <div>Popup content here !!</div>
  </Popup>
);

You can find more examples in the reactjs-popup home page

Contributing

Clone Repo

Fork and then clone the repo

git clone git@github.com:your-username/reactjs-popup.git

Start Developing

Install all npm scripts:

npm install
or
yarn install

we use a simple package called parcel-story it's a simple storybook alternative more info https://github.com/yjose/parcel-story

Run parcel-story :

yarn start

Run Test in watch mode

yarn test-watch

To make contributing simply you need to create a new story with documentation under stories/src directory ( you can copy/past any story to start with ).

In this story, you need to present the new features or the bug fix and don't forget to comment your code :) .

Make Changes. If you want to contribute check out the help wanted issues for things that need fixing.

Before submitting a pull request run npm run test to run the unit-tests and npm run eslint to check for linting errors in your changes.

Licensing

The code in this project is licensed under MIT license.

Show your support!

Buy Me A Coffee

That's all, thank you for your attention, please Star on GitHub the repo to show your support...

...we are all made of stars Star on GitHub !

Maintainers


Youssouf EL Azizi
You can’t perform that action at this time.