Modalfy
This project was insipred by the need for a modal component that unmounts when it is closed.
Usage
- Import
Modalfy
and place anywhere you would like the button for the modal to appear.
; <Modalfy />
- Once you have the
Modalfy
component, you can configure it with some properties.
<Modalfy id=10 mounted= console updated= console unmounted= console 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= { // custom call back, doing something async, modal } />
- 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
- Styling
@todo: make styles extendable
Run the Sample App
- 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 onlocalhost:8000