PopKit! 🎉

Introducing PopKit, the essential React library for crafting captivating popups, modals, toasts, and alerts. 🚀 Seamlessly integrate polished and responsive components into your React applications. PopKit streamlines development, empowering you to prioritize flawless user experiences. 🔧 Elevate your React app effortlessly with PopKit today.

Features

• 🎉 Easily integrate captivating popups, modals, toasts, and alerts into your React applications.
• 🛠️ Streamline development with polished and responsive components.
• 🚀 Elevate user experiences effortlessly.
• 🔧 Hassle-free implementation for flawless user interactions.
• 💡 The easiest UI library available.
• 👌 Simplify the process of adding engaging UI elements.
• 🌟 Empower developers to craft captivating user interfaces.
• 💬 Enhance user engagement with interactive alerts and notifications.
• 🔔 Seamlessly manage popups and alerts for a smoother user journey.
• 🎨 Customize and tailor UI elements to match your brand's aesthetic.
• 💼 Boost productivity with the easiest React library for UI enhancements.
• Dark mode 🌒
• And much more !

Installation

 

Using NPM : 👇

1  npm install popkit

Using Yarn : 👇

1  yarn add popkit

Add Styles : 👇

1import "popkit/dist/style.css";

If you're using Next.js, simply add this code snippet inside either _app.js (if you're using page routing) or layout.jsx (for app routing)

 

Usage / Examples

 

Alert Popup 👇

 

1import React, { useState } from "react";
2
3import { AlertPopup } from "popkit";
4import "popkit/dist/style.css"; //Important for Styling
5
6function Example() {
7  const [modal, setModal] = useState(false);
8
9  const handlePopup = () => {
10    setModal(true);
11  };
12  return (
13    <>
14      <button onClick={handlePopup}>Trigger Popkit!</button>
15      <AlertPopup
16        title="Mission Accomplished! 🏆"
17        description="Congratulations! You've successfully completed your task. Our success popups celebrate your achievements and victories!🚀"
18        variant="success"
19        open={modal}
20        setOpen={() => {
21          setModal(!modal);
22        }}
23        onConfirm={() => {
24          /*redirect somewhere*/
25        }}
26        crossButton={true}
27        buttonsText={["First Button Text", "Second Button Text"]} // !NOTE: don't add more than 2 elements or else it'll break
28        isDark={true} // {true} -> means dark theme, {false} -> means light theme
29      />
30    </>
31  );
32}
33
34export default Example;

 

Popup With Image 👇

 

1import React, { useState } from "react";
2import { Popup } from "popkit";
3import "popkit/dist/style.css"; //Important for Styling
4
5function Popkit() {
6  const [modal, setModal] = useState(false);
7
8  const handlePopup = () => {
9    setModal(true);
10  };
11  return (
12    <>
13      <button onClick={handlePopup}>Trigger Popkit!</button>
14      <Popup
15        title="Mission Accomplished! 🏆"
16        description="Astronauts landed on the moon successfully. Stay tuned as our team delves into the historic lunar landing achievements.🚀"
17        buttonColor={"DC6803"} //add hexcode without hashtag (#)
18        img={
19          "https://img.freepik.com/premium-photo/ai-enhances-our-understanding-cosmos-by-analyzing-vast-amounts-data-collected-by-telescopes-probes-generated-by-ai_727385-1872.jpg?w=900"
20        }
21        crossButton={true} // wether you need a cross button on top left corner or not
22        buttonsText={["First Button Text", "Second Button Text"]} // !NOTE: don't add more than 2 elements or else it'll break
23        isDark={true} // {true} -> means dark theme, {false} -> means light theme
24        open={modal}
25        setOpen={() => {
26          setModal(!modal);
27        }}
28        onConfirm={() => {
29          /*redirect somewhere*/
30        }}
31      />
32    </>
33  );
34}
35
36export default Popkit;

 

Newsletter Popup 👇

 

1import React, { useState } from "react";
2import { NewsletterPopup } from "popkit";
3import "popkit/dist/style.css"; //Important for Styling
4
5function Popkit() {
6  const [modal, setModal] = useState(false);
7
8  const handlePopup = () => {
9    setModal(!modal);
10  };
11
12  const onSubmit = (event) => {
13    event.preventDefault(); // Prevents the default form submission behavior
14
15    // Access the input value
16    const enteredEmail = event.target.elements.newsletter.value;
17    console.log("Entered email:", enteredEmail);
18
19    // You can perform further actions here, such as sending the email to a server
20    //Or setting the value to the state
21    // anything you like
22  };
23  return (
24    <>
25      <button onClick={handlePopup}>Trigger Popkit!</button>
26
27      <NewsletterPopup
28        title={"Subscribe to our newsletter "}
29        description={
30          "Receive new articles and resources directly on your inbox. fill you email below to join our email newsletter today  "
31        }
32        buttonColor={"4A3AFF"} //add hexcode without hashtag (#)
33        open={modal}
34        setOpen={handlePopup}
35        onSubmit={onSubmit} // get value from input on form submit
36        isDark={false} // {true} -> means dark theme, {false} -> means light theme
37        iconImage={"https://i.ibb.co/LCQvnrL/Group-37333.png"}
38      />
39    </>
40  );
41}
42
43export default Popkit;

 

Cookies Popup 👇

1import React, { useState } from "react";
2import { CookiesPopup } from "popkit";
3import "popkit/dist/style.css"; //Important for Styling
4
5function Popkit() {
6  const [modal, setModal] = useState(false);
7
8  const handlePopup = () => {
9    setModal(!modal);
10  };
11
12  return (
13    <>
14      <button onClick={handlePopup}>Trigger Popkit!</button>
15
16      <CookiesPopup
17        title={"Cookie Policy"}
18        description={
19          "We care about your data, and we’d use cookies only to improve your experience.By using this website, you accpet out Cookies Policy."
20        }
21        iconImage={"https://i.ibb.co/6DQ7MPY/Component-1.png"}
22        open={modal}
23        setOpen={handlePopup}
24        onSubmit={handlePopup}
25        isDark={false} // {true} -> means dark theme, {false} -> means light theme
26        crossButton={true} // wether you need a cross button on top left corner or not
27      />
28    </>
29  );
30}
31
32export default Popkit;

 

Is That All?

Absolutely not! We're constantly adding more exciting components, including cool popups with various styles, as well as toasts, alert messages, and much more!

Contribute

Show your ❤️ and support by giving a ⭐. Any suggestions are welcome!

Have ideas or want to contribute? Show support by Clicking Here