DEV Community

Elazizi Youssouf
Elazizi Youssouf

Posted on • Updated on

Introducing reactjs-popup 🎉 —  Modals, Tooltips, and Menus —  All in one

This article is about giving you a simple overview of what you can do with reactjs-popup and how to use it effectively.

Today, we are excited to announce reactjs-popup 1.0.

Reactjs-popup is a simple and very small (3 kb) react popup component, with multiple use cases. 
we created reactjs-popup to create a color picker for our project picsrush a new online image editor. After a while, We decided to make it available for everyone in GitHub and npm repository.

Why do you need to choose reactjs-popup over all other implementation?

  • 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. 🚀
  • All these clocks in at around 3 kB zipped. ⚡️

Requires React >= 16.0

How can reactjs-popup help you in your next react project?

If you need to create a simple modal, tooltip or a nested menu this component is your best choice to start with. but first, let get started with the component.

All in one demo: Modal Tooltip and Menu

alt text

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


Enter fullscreen mode Exit fullscreen mode

Now you can import the component and start using it :



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>
);


Enter fullscreen mode Exit fullscreen mode

You can also use it with function as children pattern.



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

export default () => (
  <Popup trigger={<button>Trigger</button>} position="top left">
    {close => (
      <div>
        Content here
        <a className="close" onClick={close}>
          &times;
        </a>
      </div>
    )}
  </Popup>
);


Enter fullscreen mode Exit fullscreen mode

Documentation and Examples : Reatjs popup home page

It your turn now to try it !!!

Thanks for reading! If you think other people should read this post and use this component, tweet and share the post and start the component repo.

GitHub logo yjose / reactjs-popup

React Popup Component - Modals,Tooltips and Menus —  All in one

Reactjs-popup

Build Status npm bundle size version downloads

MIT License All Contributors PRs Welcome Code of Conduct

Watch on GitHub Star on GitHub Tweet

Reactjs-popup is a simple react popup component that helps you create simple and complex Modals, tooltips, and Menus for your next React App.

You should consider using reactjs-popup for those couple of reasons :

  • ✅ Modal, Tooltip, Menu : All in one library 🏋️
  • ✅ Very tiny library (3kb) ⚡️
  • ✅ Fully accessible
  • ✅ Function as children pattern to take control over your popup anywhere in your code 💪
  • ✅ Easy to use 🚀
  • ✅ TypeScript Support 👌
  • ✅ IE Support. 🚀
  • ✅ Full style customization 👌 (js, CSS, styled-components)
  • ✅ Support for controlled Modals & Tooltips
  • ✅ Default & Custom Animations

Demo

This is a simple Demo to demonstrate how you can create Modals, Tooltips, Menus using reactjs-popup.

Live Demo

 reactjs popup demo


Sponsored by

frigade-sponsor

React-JS Popup is proud to be sponsored by Frigade, a developer tool for building better product onboarding…

What do you think, any ideas 👌?

Top comments (5)

Collapse
 
rifaimartin profile image
Rifai Martin

do you have number ?

Collapse
 
elaziziyoussouf profile image
Elazizi Youssouf

number ??

Collapse
 
lukaszkuczynski profile image
lukaszkuczynski

What do you mean?

Collapse
 
rifaimartin profile image
Rifai Martin

no ... I mean, I want to ask if you have whatsApp number ..

do you have a particular community? I want to join and contribute

Collapse
 
razaakmal1 profile image
Raza Akmal

if I have 5 menus in the popup and I want to disable 1 for user and another 1 for admin how can i do that?
if I dont show it instead of disabling it its UI look awkward