Magic Pill

Let it empower you.

Disclaimer

Even though Magic Pill is already available to everyone, please keep in mind that its development is not over yet.
You can technically use it but the documentation is still being improved.
I'll update this section once a real usable version is released.

#### Thank you !!
Thank you for your patience and to all people who already have shown interest in Magic Pill, it's my very first npm package and I couldn't ask for a better reception of my package after only a few days after its initial release.

Badges

!npm version
!npm downloads

Introduction

Magic Pill is a powerful React component that lets you show contextual information to your users in multiple ways. It can function as a notification system mimicking Apple's Dynamic Island, or as a dynamic navbar for seamless navigation. Built with TypeScript for enhanced type safety and developer experience.

Features

- [X] Multiple modes: Notification system and Dynamic Navbar
- [X] Written in TypeScript with comprehensive type definitions
- [X] Highly customizable React component with strongly typed props
- [X] Fully customized styling based on CSS variables for easy theme adaptation
- [X] Built with NextJS in mind, also works with vanilla React
- [X] No external library dependency (apart from bundling)
- [X] Lightweight and efficient
- [X] Full TypeScript support with proper type checking

Installation

$3

Want to quickly give it a try? Add Magic Pill to any React/NextJS project within 10 seconds with our CDN links!
#### jsDelivr
``html


`
#### unpkg
`html


`

$3

Magic Pill is available on npm, simply use the following command and you're ready to go!
`bash
npm install magic-pill
`

How to use it?

$3

For it to work properly, you need to import styles in your app (we recommend importing it into your app.tsx file).
`typescript
// Import in your Next.js or React project
import "magic-pill/dist/magicpill.css";
`

$3

Magic Pill is designed to be used with a Context to manage its state globally. Here's how to set it up:

1. First, create a context for Magic Pill (e.g., in app/contexts/magicPillContext.tsx):
`typescript
"use client"
import React, { createContext, useContext, useState } from "react";
import { MagicPillType, Mode, NotificationIcon, CTAIcon, MagicPillNavbarItem } from "magic-pill";
import { updateMode, updateNotificationIcon, updateNotificationMessage, updateCTAIcon, updateCTALabel, updateCTALink, updateInfoTitle, updateInfoContent, updateInfoCloseLabel, updateNavItemLabel, updateNavItemLink, updateNavItemIcon, addNavItem, deleteNavItem } from "magic-pill";

const defaultPillData: MagicPillType = {
mode: "navbar",
navbar: {
navItems: [
{
icon: "arrow",
label: "mp-test",
link: "/mp-test"
},
{
icon: "cross",
label: "demo",
link: "/demo"
}
]
}
};

interface MagicPillContextType {
pillData: MagicPillType;
setPillData: (data: MagicPillType) => void;
// Direct data manipulation methods
updateMode: (mode: Mode) => void;
updateNotificationIcon: (icon: NotificationIcon) => void;
updateNotificationMessage: (message: string) => void;
updateCTAIcon: (icon: CTAIcon) => void;
updateCTALabel: (label: string) => void;
updateCTALink: (link: string) => void;
updateInfoTitle: (title: string) => void;
updateInfoContent: (content: string) => void;
updateInfoCloseLabel: (closeLabel: string) => void;
updateNavItemLabel: (label: string, index: number) => void;
updateNavItemLink: (link: string, index: number) => void;
updateNavItemIcon: (icon: CTAIcon, index: number) => void;
addNavItem: (navItem: MagicPillNavbarItem) => void;
deleteNavItem: (index: number) => void;
}

const MagicPillContext = createContext({
pillData: defaultPillData,
setPillData: () => {},
updateMode: () => {},
updateNotificationIcon: () => {},
updateNotificationMessage: () => {},
updateCTAIcon: () => {},
updateCTALabel: () => {},
updateCTALink: () => {},
updateInfoTitle: () => {},
updateInfoContent: () => {},
updateInfoCloseLabel: () => {},
updateNavItemLabel: () => {},
updateNavItemLink: () => {},
updateNavItemIcon: () => {},
addNavItem: () => {},
deleteNavItem: () => {},
});

export const useMagicPill = () => {
const context = useContext(MagicPillContext);
if (!context) {
throw new Error("useMagicPill must be used within a MagicPillProvider");
}
return context;
};

export const MagicPillProvider = ({
children
}: {
children: React.ReactNode
}) => {
const [pillData, setPillData] = useState(defaultPillData);

// Create wrapper functions that use the handlers with the local setPillData
const contextValue: MagicPillContextType = {
pillData,
setPillData,
updateMode: (mode: Mode) => updateMode(mode, setPillData),
updateNotificationIcon: (icon: NotificationIcon) => updateNotificationIcon(icon, setPillData),
updateNotificationMessage: (message: string) => updateNotificationMessage(message, setPillData),
updateCTAIcon: (icon: CTAIcon) => updateCTAIcon(icon, setPillData),
updateCTALabel: (label: string) => updateCTALabel(label, setPillData),
updateCTALink: (link: string) => updateCTALink(link, setPillData),
updateInfoTitle: (title: string) => updateInfoTitle(title, setPillData),
updateInfoContent: (content: string) => updateInfoContent(content, setPillData),
updateInfoCloseLabel: (closeLabel: string) => updateInfoCloseLabel(closeLabel, setPillData),
updateNavItemLabel: (label: string, index: number) => updateNavItemLabel(label, index, setPillData),
updateNavItemLink: (link: string, index: number) => updateNavItemLink(link, index, setPillData),
updateNavItemIcon: (icon: CTAIcon, index: number) => updateNavItemIcon(icon, index, setPillData),
addNavItem: (navItem: MagicPillNavbarItem) => addNavItem(navItem, setPillData),
deleteNavItem: (index: number) => deleteNavItem(index, setPillData),
};

return (

{children}
{pillData &&