0.0.6 • Published 8 months ago
library-react-modal v0.0.6
modal-library
NPM package made with create-react-app
Description
react component for displaying a modal in full screen mode. The modal contains:
- a close button
- a title
- content (which can be text or a component)
style can be customised using props
Install
npm install --save library-react-modal
Documentation
After installing the package on your dependencies, import the library in your parent component.
importation
import { Modal } from 'library-react-modal';
Setup the state to open / close the modal in your parent component
- import useState from react
- create the state with useState => it will be a boolean with false by default
const [isOpen, setIsOpen] = useState(false);
modal implementation
<Modal
close={() => setIsOpen(false)}
show={isOpen}
title={'Selected employee:'}
content={<Content/>}
}}
/>
Props Description
- Close (required): handle the modal closing. the props is must receive a function where you pass the setter to false
- show (required) : handle the modal opening. the props must receive the state value of the getter (isOpen)
- title(required): contain the modal title
- content(required): contain the modal content. It could be a string or an object
- customClassName: There is a default style for the modal but you can customize it. Create your own css style and add the class names to the prop "customClassName". "customClassName" is an object where you can pass class names for following parts of the modal:
- the modal container
- the closing button
- the title
- the content
customClassName={{
closeBtn: 'custom-btn',
modal: 'custom-modal',
title: 'custom-title',
content: 'custom-modal-content',
}}
Simple Example
import React, { useState } from 'react';
import { Modal } from 'react-modal-library';
const App = () => {
const [isOpen, setIsOpen] = useState(false);
return (
<>
<div className="wrapper">
<p>click to show Modal</p>
<button onClick={() => setIsOpen(true)} className="btn">
Show modal
</button>
<Modal
close={() => setIsOpen(false)}
show={isOpen}
title={'Selected employee:'}
content={'John McLane'}
}}
/>
</div>
</>
);
};
export default App;
Example with object for content and a custom style
import React, { useState } from 'react';
import { Modal } from 'react-modal-library';
import Content from './Content';
const App = () => {
const [isOpen, setIsOpen] = useState(false);
return (
<>
<div className="wrapper">
<p>click to show Modal</p>
<button onClick={() => setIsOpen(true)} className="btn">
Show modal
</button>
<Modal
close={() => setIsOpen(false)}
show={isOpen}
title={'Selected employee:'}
content={<Content/>}
customClassName={{
closeBtn: 'custom-btn',
modal: 'custom-modal',
title: 'custom-title',
content: 'custom-modal-content',
}}
/>
</div>
</>
);
};
export default App;