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

dentibiotics_modal

v0.1.14

Published

a modal from p14 openclassroom's project

Downloads

18

Readme

A simple & lightweight method to display modal windows with React.

dentibiotics_modal is a quite simple modal, with content box and button. By default the modal window is screen's centered horizontaly and verticaly. It's really easy to customize it with all sorts of props.

Link to jQuery and npm repo :

Original jQuery modal on gitHub : jQuery

My React component : npm

Installation

You can install dentibiotics_modal with npm:

npm install dentibiotics_modal

How to

First you need to import the Modal :

import { Modal } from 'dentibiotics_modal';

Then you can use and customize the component :

<Modal 
    zindex={}
    backgroundAction={}
    modalStyle={}
    content={}
    contentStyle={}
    buttonStyle={}
    buttonAction={}
/>

z-index :

You can access the background className with props :

zindex={z-10}

It's an optional props, default value is 'z-index: 10;'

background eventListener :

You can add an action on the background if needed with props :

backgroundAction={your props}

modal screen style :

It's connected to the modal div className. I work with tailwindcss so I use this props for exemple :

modalStyle={'p-9 border-4 flex flex-col justify-center items-center border-green-900 border-opacity-70 bg-white rounded overflow-hidden bg-scroll'}

modal window content :

You can customize the modal content with props :

content={modalContent}

modal content style :

And the content style (it's linked to the content div' className).

contentStyle={'m-5'}

button style :

The button is fully customizable with this className's props :

buttonStyle={'w-24 p-2 opacity-80 hover:opacity-100 rounded px-5 bg-green-900 text-white'}

button eventListener :

You can add an action on the button

buttonAction={}

button text content :

And finally the button text

buttonContent={}

It's an optional props, default value is 'Close'

More informations

To show or hide your modal window i recommand this method. Add this in your parent component :

const [modal, setModal] = useState(false);
const [modalContent, setModalContent] = useState('');

const handleClick = () => {
    setModal(false);
    };

And to hide your modal on background or button click :

{modal && (
    <Modal
        backgroundAction={handleClick}
        modalStyle={custom-modal-style}
        content={modalContent}
        contentStyle={custom-content-style}
        buttonStyle={custom-button-style}
        buttonAction={handleClick}
        />
    )}