Modalme
Live Demo
Modalme is React component for using custom modals
Getting started
npm install modalme
Style import (with webpack)
# CSS
import 'modalme/dist/index.css';
Example
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import Modalme from 'modalme';
class App extends Component {
customButton = openModal => (
<button type='button' className='_1I0MO' onClick={openModal}>
Click me!
</button>
);
customContent = closeModal => {
return (
<div className='_3BV9V'>
<h2>Hello, Welcom to modalme</h2>
<button type='button' className='_330Pu'
onClick={closeModal}>
X
</button>
</div>
);
};
render() {
return (
<Modalme customButton={this.customButton}
customContent={this.customContent}
modalName='Bottom'
ReactDOM={ReactDOM}
modalContainer='modal'
/>
);
};
};
export default App;
Props
-
modalContainer
: String, (required)- Make sure to bind modal to your appElement
<!-- make sure to add add this line of code in your public folder -->
<div id="modal"></div>
-
modalName
: String, defaultBottom
- available string props:
Top, Right, Bottom, Left, Unfolding, Revealing, Uncovering, BlowUp, Sketch, Bond
- available string props:
-
renderCustomButton
: Function, custom button component (required)- Use this to render a custom button
- Passes
openModal
callback function to open modal
customButton = openModal => ( <button type='button' className='_1I0MO' onClick={openModal}> Click me! </button> );
-
renderCustomContent
: Function, custom modal content component (required)- Use this to render a custom modal content
- Passes
closeModal
callback function to close modal
customContent = closeModal => { return ( <div className='_3BV9V'> <h2>Hello, Welcom to modalme</h2> <button type='button' className='_330Pu' onClick={closeModal}> X </button> </div> ); };
Support
Please open an issue.
Author
erinyes 2020, erinyes.com
Donation
If this project help you reduce time to develop, you can give me a cup of coffee :)
Contributing
Each PR should be specific and isolated to the issue you're trying to fix. Please do not stack features/chores/refactors/enhancements in one PR. Describe your feature/implementation in the PR. If you're unsure its useful or if it is a major change, please open an issue first and get feedback.
- Follow eslint provided
- Comment your code
- Write clean code
Please contribute using Github Flow. Create a branch, add commits, and open a pull request.
License
MIT