0.0.3 • Published 6 years ago
react-beast-modal v0.0.3
React Beast Modal Usage
- In your root index.js (or whatever you call it) file
// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import ModalProvider from 'react-beast-modal';
import App from './App';
import Home from './home';
/*****************************************************
** create a configuration variable ******************
*****************************************************/
const modalConfig = {
backdropStyle: { // defaults to empty object
backgroundColor: 'rgba(0, 0, 0, 0.3)'
},
modalContainerStyle: { //default to empty object
borderRadius: '2px'
},
closeOnBackdropClick: true // default is false
}
/*****************************************************
** wrap the outermost component in the modal provider
*****************************************************/
ReactDOM.render(
<div>
<ModalProvider configuration={modalConfig}>
<App>
<Home/>
</App>
</ModalProvider>
</div>,
document.getElementById('root')
);
- In any component you want to use the modal, import the
withBeastModal
HOC (Higher Order Component)
// home.js
import React from 'react';
/* withBeastModal is a HOC that adds a function `toggleBeastModal`
* and a boolean `beastModalVisible` to the props
*/
import { withBeastModal } from 'react-beast-modal';
import WelcomeModal from './welcomeModal';
class Home extends React.Component {
showWelcomeModal = () => {
const { beastModalVisible } = this.props;
// toggleBeastModal takes an object with two props
// isVisible (boolean): default is false
// modalContent (react element):
this.props.toggleBeastModal({
isVisible: !beastModalVisible,
modalContent: (
<WelcomeModal/>
)
})
}
render() {
return (
<div>
<h1>Home Page</h1>
<button onClick={this.showWelcomeModal}>Click me</button>
</div>
);
}
}
// pass the component to the `withBeastModal` HOC
export default withBeastModal(Home);