modalfy

Modalfy

This project was insipred by the need for a modal component that unmounts when it is closed.

Usage

1. Import Modalfy and place anywhere you would like the button for the modal to appear.

import React from 'react'
import Modalfy from 'modalfy';

<Modalfy />

1. Once you have the Modalfy component, you can configure it with some properties.

  <Modalfy
    id={10}
    mounted={modal => console.log(`Mounted: ${ modal }`)}
    updated={modal => console.log(`Updated: ${ modal }`)}
    unmounted={modal => console.log(`Unmounted: ${ modal }`)}
    content={<div>Content to Modalfy</div>}
    loadingIndicator={<div>loading...</div>}
  />

Lifecycle methods expose the undelying modal component, making it available in your custom callback functions

  <Modalfy
    mounted={modal => {
      // custom call back, doing something async, 
      modal.setState({ loading: true }, () => { // setting state on modal's state
        setTimeout(() => {
          modal.setState({ loading: false })
        }, 1000)
      })
    }}
  />

1. Properties

Add your own bahvior with functions that are passed to the react lifecycle methods of Modalfy.

property	type	description
id	Number	unique id
mounted	Function	componentDidMount
updated	Function	componentDidUpdate
unmouted	Function	componentWillUnmount
content	JSX	the content of your modal
loadingIndicator	JSX	loading component

All of the properties are optional, and will fallback to defualts

1. Styling

@todo: make styles extendable

Run the Sample App

1. This project was created with create-react-app, and uses all the regular CRA scripts.

$ git clone <this repo>
$ cd <this repo>
$ yarn install
$ yarn start

Testing

$ yarn test

Contributing

Contributions are more than welcome!

This project uses react-npm-component-starter for it's NPM package generating boilerplate code. Many thanks to @markusenglund

The stuff you need to start extedning Modalfy is located in /npm

$ cd npm
$ yarn dev
// make you changes in src/lib
$ yarn docs:prod // build node module
// make a PR against this repo with you changes 🎉

There is another demo app using Modalfy in the npm folder. Use yarn dev to see it running on localhost:8000