https://github.com/code-crash/react-modal
This project contains the source code for @code/react-modal npm module
https://github.com/code-crash/react-modal
Last synced: 8 months ago
JSON representation
This project contains the source code for @code/react-modal npm module
- Host: GitHub
- URL: https://github.com/code-crash/react-modal
- Owner: Code-Crash
- Created: 2020-02-21T18:50:59.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2024-04-23T01:43:45.000Z (about 2 years ago)
- Last Synced: 2025-04-06T08:04:43.992Z (about 1 year ago)
- Language: TypeScript
- Size: 645 KB
- Stars: 3
- Watchers: 1
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# @code/react-modal
> This library will hold the code for modal and it's examples
[](https://www.npmjs.com/package/@code/react-modal) [](https://standardjs.com)
## Install
```bash
npm i github:code-crash/react-modal --save
```
## Usage
### Full Example
```jsx
import React, { Component } from 'react'
import ModalComponent from '@code/react-modal'
const styles = {
area: {
width: '100%',
},
};
export default class App extends Component {
constructor(props) {
super(props);
this.toggle = this.toggle.bind(this);
this.ccModalContent = this.ccModalContent.bind(this);
this.ccModalCancel = this.ccModalCancel.bind(this);
this.ccModalContinue = this.ccModalContinue.bind(this);
}
/**
* @description This function will toggle your modal.
*/
toggle() {
if (this.modal && this.modal.state && this.modal.state.open) {
this.modal.close();
} else {
this.modal.open();
}
}
/**
* @description This function will handle the cancel button
*/
ccModalCancel() {
console.log('modal action Cancel and Close Modal!');
this.toggle();
}
/**
* @description This function will handle the continue button or save button
*/
ccModalContinue() {
console.log('modal action Continue!');
}
/**
* @description This function will return the content which you
* need to put into the modal as content
*/
ccModalContent() {
return (
Your Component is Here!!
);
}
render() {
return (
Basic Modal
{ this.modal = component; }}
content={this.ccModalContent()}
toggle={this.toggle}
styles={styles}
cancel={this.ccModalCancel}
continue={this.ccModalContinue}
action={{ cancel: { label: 'Close', hide: false } }}
/>
)
}
}
```
### Input Properties along with Functions
```tsx
export type Props = {
hTitle?: string, // 'Header Title',
fTitle?: string, // 'Footer Title',
content?: JSX.Element, //
This is your Component,
toggle?: Function, // 'Your function which will manage the open|close the modal',
cancel?: Function, // 'Your function which will manage the cancel the modal',
continue?: Function, // 'Your function which will manage the continue the modal',
action?: {
cancel?: {
hide?: boolean, // default: false,
label?: string, // default: 'Cancel'
},
continue?: {
hide?: boolean, // default: false,
label?: string, // default: 'Continue'
},
},
styles?: {
area?: object, // { width: '100%', background: 'red', },
cancel?: object,
continue?: object,
},
};
```
## To Do
* Add more styles support for each section of modal
* Add examples with different modals
* Update ```README.md``` with proper explanation
* Add support for fade-in and fade-out
*
## License
MIT © [Code-Crash](https://github.com/Code-Crash)