https://github.com/codebrahma/react-stateless-modal
https://github.com/codebrahma/react-stateless-modal
Last synced: 11 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/codebrahma/react-stateless-modal
- Owner: Codebrahma
- Created: 2019-12-26T07:14:51.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2024-04-23T01:43:27.000Z (almost 2 years ago)
- Last Synced: 2025-02-19T12:02:07.477Z (12 months ago)
- Language: JavaScript
- Size: 1.08 MB
- Stars: 1
- Watchers: 3
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# react-stateless-modal
> A modal library that does not require state maintenance
[](https://www.npmjs.com/package/react-stateless-modal) [](https://standardjs.com)
## Install
```bash
npm install --save react-stateless-modal
```
## documentation
Read the full Documentation [here](https://cb-react-modal-docs.netlify.com/)
## Advantages
Create modals wherever you want without having to maintain state variables.
## Motivation
The modal libraries in existence such as `react-responsive-modal` requires users to maintain state variables for the creation of each modal, which can become painful while maintaining a large codebase that involves multiple modals. This library eliminates the above problem and lets users create modals without having to create and maintain state variables.
## Usage
```jsx
import React, { Component } from "react";
import { openModal } from "react-stateless-modal";
class Example extends Component {
openModal = () => {
openModal({
header: () => (
/* component or string to render header */
),
body: () => (
/* component or string to render body */
),
footer: () => (
/* component or string to render footer */
),
classNames: { overlay: className for overlay, modal: className for the modal, closeIcon: className for close icon},
closeOnEscape: /* Setting true closes the modal on pressing escape key setting false does the opposite (Optional)*/,
closeIcon: { src: IconObject, alt: alt text for the icon},
animation: { name: choose from 'bounce', 'fade-in' and 'zoom' animation, duration: 'animationDuration'},
containerId: /* Id of the custom container over which you would like the modal to be mounted */
modalId: { /* make the modal take the id of your choosing */}
});
};
render() {
return Open Modal;
}
}
```
The `openModal` method will mount the container for you.
You may optionally choose to use the component mode of the library by importing and mounting the `Modal` component. you may use all the properties used in the object passed to the `openModal` function. The example below shows how to create a simple modal using component mode. You additionally need to pass `open` and `onClose` prop. Refer docs for more information.
```jsx
import React, { Component } from "react";
import "./styles.css";
import { Modal } from "react-stateless-modal";
class App extends Component {
state = {
open: false
};
handleClose = () => {
this.setState({ open: false });
};
handleOpen = () => {
this.setState({ open: true });
};
render() {
const { open } = this.state;
return (
Open Modal via Component mode