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

react-yet-another-modal

v0.1.6

Published

react-yet-another-modal

Downloads

10

Readme

react-yet-another-modal

NPM

React modal which is dead simple, semantic, flexible.

Showcase

Features

  • transports modal content into a new React component and appends it to the document.body (creates a new independent React tree)
  • automatically resize modal to fit your screen size change
  • can be opened by the prop isOpened
  • can be opened after a click on an element that you pass through the prop link (and then it takes care of the open/close state)
  • doesn't leave any mess in DOM after closing
  • provides its child with this.props.closePortal callback
  • can be closed by closeOnEsc and closeOnOutsideClick
  • handle modal nesting style and all their z-index automatically

Demo

Try [https://react-yet-another-modal] or

git clone https://github.com/chenzhihao/react-yet-another-modal
cd react-yet-another-modal
npm install
npm run dev
open localhost:8080

Installation

npm install react-yet-another-modal --save

Usage

import React from 'react';
import ReactDOM from 'react-dom';
import Modal from 'react-yet-another-modal';

export default class App extends React.Component {
  render() {
    return
      <Modal
        title="Yet another modal"
        link={<button>Open a modal</button>}
      >
        <div>
          here we go, your modal content should be here.
        </div>
      </Modal>
    );
  }
}
ReactDOM.render(<App />, document.getElementById('react-body'));

Documentation - props

Always required

children : ReactElement

The portal expects one child (<Modal><Child ... /></Modal>) that will be ported.

link : ReactElement

The Modal button/text or any ReactElement which is used to open the modal. This element will be rendered by the Modal immediately.

Optional

isOpened : bool

If true, the modal is open. If false, the portal is closed. It's up to you to take care of the closing (aka taking care of the state). Don't use this prop if you want to make your life easier. Use link instead!

beforeCloseCallback : function

The callback before the Modal close.

closeOnEsc: bool

If true, the Modal can be closed by the key ESC.

closeOnOutsideClick: bool

If true, the Modal can be closed by the outside mouse click.

onOpen: func(DOMNode)

This callback is called when the Modal is opened and rendered (useful for animating the DOMNode).

beforeClose: func(DOMNode)

This callback is called before Modal close. You can do some DOMNode animation first and it will removes itself from DOM.

onClose: func

This callback is called when the portal closes and after beforeClose.

Tips & Tricks

  • Close modal programmatically

Sometimes you need to close your modal programmatically. A props closePortal is injected into your Modal Content Component automatically directly.

  let ProgrammaticallyCloseModal = props => {
    return (<div>
      <section>
        <button onClick={()=>this.props.closePortal()}>
          Close
        </button>
      </section>
    </div>);
  }

  ...

  <Modal title="My modal">
    <ProgrammaticallyCloseModal />
  </Modal>