reactjs-popup Home page https://react-popup.elazizi.com/ 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. R 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 a new online image editor. After a while, We decided to make it available for everyone in GitHub and npm repository. eactjs-popup picsrush 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, Toast(coming soon) : All in one component🏋️ Full style customization. 👌 Easy to use. 🚀 All these clocks in at around 3 kB zipped. ⚡️ Animation (coming soon). 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. Getting Started This package is available in npm repository as reactjs-popup. It will work correctly with all popular bundlers. _reactjs-popup - React Popup Component - Modals,Tooltips and Menus - All in one_github.com yjose/reactjs-popup npm install reactjs-popup --save#using yarnyarn add reactjs-popup -S 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>); 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>); Complete component API : Reactjs-popup Component API Use Cases 🙌 Tooltip Use Case Modal Use Case Menu Use Case ALL in one demo reactjs-popup demo (Modal,tooltip,Menu) What’s Next For reactjs-popup ? The next version of reactjs-popup will support creating Simple Toast with full customization, But our big deal is to add Animation API to the component so feel free if you have any ideas 💪. Thanks for reading! If you think other people should read this post and use this component, clap for me, tweet and share the post. Remember to follow me on Medium so you can get notified about my future posts. It your turn now to try it !!! Show your support! That’s all, thank you for your attention, please star the to show your support… repo Read more stories https://elazizi.com/

Create a fancy burger menu using reactjs-popup

Laravel & Docker, Zero config with Vessel

Too Long; Didn't Read

Make resilience your competitive advantage

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

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

A step by step guide to setup PHP (Laravel) environment (Linux).

The Noonification: Reduce Javascript: Master the Basics (1/11/2023)

The Noonification: Satoshi Might Be a Bitcoin ETF Skeptic (1/13/2024)

The Noonification: Small Puddle of Freedom (11/25/2022)

The Noonification: How to Use AI for Your B2B Marketing (11/11/2022)

A step by step guide to setup PHP (Laravel) environment (Linux).

The Noonification: Reduce Javascript: Master the Basics (1/11/2023)

The Noonification: Satoshi Might Be a Bitcoin ETF Skeptic (1/13/2024)

The Noonification: Small Puddle of Freedom (11/25/2022)

The Noonification: How to Use AI for Your B2B Marketing (11/11/2022)

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps