react-modal
Description
React modal component
Installation
npm install @opuscapita/react-modal styled-components
Demo
View the DEMO
Change log
View the Change log
Migrate guide
View the Migrate guide between major versions
Builds
UMD
A build with compiled styles in the .js file. Also minified version available in the lib/umd directory.
CommonJS/ES Module
You need to configure your module loader to use cjs
or es
fields of the package.json to use these module types.
Also you need to configure sass loader, since all the styles are in sass format.
- With webpack use resolve.mainFields to configure the module type.
- Add SASS loader to support importing of SASS styles.
API
Modal
Prop name | Type | Default | Description |
---|---|---|---|
id | string | oc-modal | Component ID |
className | string | oc-modal | Component class |
isOpen | boolean | true | Is modal visible |
width | string | 100% | Modal width as CSS style |
height | string | 100% | Modal height as CSS style |
Modal.Header
Prop name | Type | Default | Description |
---|---|---|---|
id | string | oc-modal-header | Component ID |
className | string | oc-modal-header | Component class |
Modal.Body
Prop name | Type | Default | Description |
---|---|---|---|
id | string | oc-modal-body | Component ID |
className | string | oc-modal-body | Component class |
isBorderVisible | boolean | false | Show border around body area |
Modal.Footer
Prop name | Type | Default | Description |
---|---|---|---|
id | string | oc-modal-footer | Component ID |
className | string | oc-modal-footer | Component class |
Modal.ButtonContainer
Prop name | Type | Default | Description |
---|---|---|---|
id | string | oc-modal-button-container | Component ID |
className | string | oc-modal-button-container | Component class |
Code example
import React from 'react';
import Modal from '@opuscapita/react-modal';
export default class ReactView extends React.Component {
constructor(props) {
super(props);
this.state = {
isOpen: false,
};
}
toggleModal = () => {
this.setState((prevState) => ({ isOpen: !prevState.isOpen }));
}
render() {
const { isOpen } = this.state;
return (
<div>
<button type="button" onClick={this.toggleModal}>
Open Modal
</button>
<Modal
isOpen={isOpen}
>
<Modal.Header>
Attention
</Modal.Header>
<Modal.Body>
This is the example modal!
</Modal.Body>
<Modal.Footer>
<Modal.ButtonContainer>
<button type="button" onClick={this.toggleModal}>
Close Modal
</button>
</Modal.ButtonContainer>
</Modal.Footer>
</Modal>
</div>
);
}
}