npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

basic-modal-react

v1.1.1

Published

A basic modal container that give you the basic functionalities of a modal to wrap your component

Downloads

6

Readme

Basic Modal React ⚛️

We provide a modal wrapper built in typescript that offer you the basic modal functionalities to handle the components you want to display inside.

You place it instead of your trigger component and pass your content as children. The library will handle the rest.

Features:

  • Local state: you don't have to pass any state to handle the opening and closing of the modal, so you prevent useless re-rendering.
  • Portal: the modal is rendered in a portal, so it's not part of your main html tree.
  • Fits your UI => To use it, you have to pass your trigger component (button, icon, image, etc...) and the component you want to display as children.
  • Basics TriggerWithModal features:
    • A fade background (customizable) that close the modal when clicked
    • A close icon-button (X by default) but you can pass and move your own component
    • Close on escape key
    • A 'controller' function if you need to close the modal by any other handler (exemple: a submit button inside the modal)

Install:

npm i basic-modal-react

yarn add basic-modal-react

pnpm add basic-modal-react


Examples:

Basic usage:

import {TriggerWithModal} from 'basic-modal-react'

export const myExample = () => {
    
    return (
        <>
            <TriggerWithModal trigger={<YourButton label='Open'/>}>
                <YourComponent/>
            </TriggerWithModal>
        </>
    )
}

Controlled usage (example: if you want to close the modal after a form submission):

import {TriggerWithModal, ModalChildProps} from 'basic-modal-react'

export const myExample = () => {
	
  const handleSubmit = ( closeModal: () => void) => {
    console.log('Form submitted!')
    closeModal();
  };
    
    return (
        <>
          <TriggerWithModal trigger={<button>Open Form</button>}>
            {({ closeModal }: ModalChildProps) => (
                    <form >
                      {/* ... */}
                      <button onClick={() => handleSubmit(closeModal)}>Submit</button>
                    </form>
            )}
          </TriggerWithModal>
        </>
    )
}

props:

trigger | Required | your trigger component (button, icon, image, etc...)

children | Required | your content

modalID | Optional | you can provide an id if you need to.

About TriggerWithModal Id

  • if you don't pass it default is 'modal'
  • To display the modal we use reactPortal, react portal create a brand-new element below your main wrapper (#root)
Example:
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8"/>
    </head>
    <body>
        <div id="myModal"></div>
        <div id="root"></div>
    </body>
</html>

Customization

backgroundColor | Optional | Just pass a valid color string ('#1F1F1F' or 'rgb(31, 31, 31)') to change the background color.

positionX | Optional | Just pass a valid string ('center', 'left', 'right') to change the position of the modal on the X axis.

positionY | Optional | Just pass a valid string ('center', 'top', 'bottom') to change the position of the modal on the Y axis.

  • you can combine both (default is center, center)

closeComponent | Optional | Just pass a valid React component to change the close handler.

closeComponentPosition | Optional | Just pass a valid {top, right} object to change the position of the close component.(default is: { top: '24px', right: '24px' })

closeIconColor | Optional | Just pass a valid color string ('#1F1F1F' or 'rgb(31, 31, 31)') to change the color of the default close icon.

Example:

import {TriggerWithModal} from 'basic-modal-react'

export const myExample = () => {
    
    return (
        <>
            <TriggerWithModal trigger={<YourButton label='Open Modal'/>}
                   positionX='right'
                   positionY='top'
                   backgroundColor='#1F1F1F'
                   closeIconColor='#fff'
                   closeComponent={<YourCloseComponent/>}
                   closeComponentPosition={{ top: '24px', right: '24px' }}
             >
                <YourComponent/>
            </TriggerWithModal>
        </>
    )
}

Hope you'll enjoy it!

If you have any question, feel free to ask!

If you want to contribute and make it better, feel free to do so!