npm.io
2.0.11 • Published 3 years ago

rpic-modal

Licence
MIT
Version
2.0.11
Deps
2
Size
122 kB
Vulns
0
Weekly
0
SummaryDependencyVersions

rpic-modal

What is it?

This is just a react modal customizable by props

Install

npm i rpic-modal

Usage

After installing the package, go to the parent component of your modal and import useState

import { useState } from 'react';

Then use a state to show / hide you modal, some App code exemple:

import { useState } from 'react';
import RpicModal from './components/RpicModal';

function App() {
    const [showModal, setShowModal] = useState(false);

    return (
        <div className="App">
            <div onClick={() => setShowModal(!showModal)}>Show the modal</div>
            {showModal && (
                <RpicModal
                    content="Customizable content"
                    closeModal={() => setShowModal(!showModal)}
                />
            )}
        </div>
    );
}

Props

PropName Type Exemple
content string 'This is a content exemple'
width string '50px'
height string '50%'
backgroundColor string 'red'
border string '2px solid black'
borderRadius string '10px'
justifyContent string 'start', 'end', center'
alignItems string 'start', 'end', center'
iconSize string '30px'
closeModal function () => { console.log('close')}

License

MIT

Keywords

rpicmodal