Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
react-popupkit
Advanced tools
Readme
A lightweight and easy-to-use react component for creating functional popup without managing state or function handling. Just call the component, apply your styles, and enjoy optimized magical popup
.
This package is available in NPM repository as react-popupkit
. It will work correctly with all popular bundlers.
npm install react-popupkit --save
or
yarn add react-popupkit
Step 01: To start using react-popupkit
, you just need to import the component from the react-popupkit
package.
import Popup from 'react-popupkit'
Step 02: Call the component where you want to use and make popup button:
export const App = () => {
return (
<Popup>
<Popup.Button>
{/* set styles inside <Popup.Button> component */}
{/* button content will be here */}
</Popup.Button>
</Popup>
)
}
Step 03: Call the popup body component with your custom styles and take all contents inside the body component. (The package has no styles provided):
export const App = () => {
return (
<Popup>
<Popup.Button>
{/* set styles inside <Popup.Button> component */}
{/* button content will be here */}
</Popup.Button>
<Popup.Body>
{/* Body content goes here with your custom styles */}
</Popup.Body>
</Popup>
)
}
Great! you're done.
export const App = () => {
return (
<Popup>
<Popup.Button className='font-medium px-3 py-1.5 rounded-md bg-slate-600 text-white'>
{/* Replace this with your actual button content */}
Click me
</Popup.Button>
<Popup.Body>
{/* Replace this with your actual popup content */}
<ul className='w-fit whitespace-nowrap h-fit rounded-md bg-zinc-100 border absolute top-full left-full'>
<Popup.TriggerClose>
<li className='text-center py-1 border-b border font-sans cursor-pointer hover:bg-zinc-200 px-10'>
Item 1
</li>
</Popup.TriggerClose>
<Popup.TriggerClose>
<li className='text-center py-1 border-b border font-sans cursor-pointer hover:bg-zinc-200'>Item 2</li>
</Popup.TriggerClose>
<Popup.TriggerClose>
<li className='text-center py-1 border-b border font-sans cursor-pointer hover:bg-zinc-200'>Item 3</li>
</Popup.TriggerClose>
</ul>
</Popup.Body>
</Popup>
)
}
use client
in the top of the file.If you want to close depends on a specific event then you can do it by useClosePopup()
hook:
import { useClosePopup } from 'react-popupkit'
export const App = () => {
// get close function by using useClosePopup() from react-popupkit
const closePopup = useClosePopup()
useEffect(() => {
// simple api fetch data
const userData = async () => {
const res = await fetch(`url_here`)
const data = await res.json()
if (data.success) {
// popup close after successfully fetch data
closePopup()
}
}
}, [])
return {
/* ...codes */
}
}
If you want to use in many place of this popup state. Then you can check below example:
export const App = () => {
const [isPopupOpen, setIsPopupOpen] = useState(false)
return (
<div>
<Popup isOpen={isPopupOpen} setIsOpen={setIsPopupOpen}>
{/* ...codes */}
</Popup>
{/* handling others thing by depend on Popup state */}
{isPopupOpen && <p>Popup is open!</p>}
</div>
)
}
Name | Value | Required | Description |
---|---|---|---|
<Popup></Popup> | Others components as a children | Yes | Parent wrapper component. |
<Popup.Button></Popup.Button> | children | Yes | Make the button for click to open popup. |
<Popup.Body></Popup.Body> | children | Yes | Wrap by body component of the desired popup contents |
<Popup.TriggerClose></Popup.TriggerClose> | children | No | Wrap the item to which one you want to close the popup after clicking. |
Name | Value | Required | Description |
---|---|---|---|
useClosePopup() | null | No | Get access of popup close from anywhere of this component. |
isOpen | boolean | No | When handle custom state then use this in the <Popup> component. |
setIsOpen | function | No | Receive a function that handle state change and use in the <Popup> component. |
toggle | boolean | No | If want to stop making toggle in <Popup.Button> and default true. |
className | string | No | Additional CSS class names for styling purposes. |
Nahid Ahmed |
FAQs
A lightweight and easy-to-use React component for creating functional popups without managing state or function. Just call the component, apply your styles, and enjoy optimized magical popups.
The npm package react-popupkit receives a total of 3 weekly downloads. As such, react-popupkit popularity was classified as not popular.
We found that react-popupkit demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.