npm.io
0.1.8 • Published 4 years ago

@ousshmi/react-modal

Licence
ISC
Version
0.1.8
Deps
8
Size
13 kB
Vulns
0
Weekly
0
SummaryDependencyVersions

A React modal npm package

Install

Using npm:

$npm install @ousshmi/react-modal

Using yarn:

$yarn add @ousshmi/react-modal

Usage
In a React app, import and use the Modal components:

import Modal from '@ousshmi/react-modal'

Modal props
Name Type Description
show boolean Show/Hide the modal
onClose function Use this function to set show value to 'false' and close the modal
title string Customize the title of the modal
message string Customize the message of the modal
closeButton boolean Show/Hide the close button
closeIcon string A path to a close icon you want to use when 'closeButton = {false}'
addNewButton boolean Show/Hide a new button, If 'true' a new button will be added
newButtonText string When 'addNewButton={true}' you could customize the text of the new button
onClickNewButton function Use this function to do whatever you want after clicking on the new button
Modal style props
Name Type Description
wrapperBackground string A normal CSS values
margin string A normal CSS values
width string A normal CSS values
maxWidth string A normal CSS values
border string A normal CSS values
borderRadius string Customize CSS values and use (overFlow : "hidden") to see result
overflow string A normal CSS values
headerBackground string A normal CSS values
headerPadding string A normal CSS values
headerFont string Everything about the font, example values: "bold 15px roboto"
headertextColor string A normal CSS values
bodyBackground string A normal CSS values
bodyPadding string A normal CSS values
bodyFont string Everything about the font, example values: "bold 15px roboto"
bodytextColor string A normal CSS values
bodyBorderTop string A normal CSS values
bodyBorderBottom string A normal CSS values
footerPadding string A normal CSS values
footerBackground string A normal CSS values
buttonPadding string A normal CSS values
buttonBackground string A normal CSS values
buttonBorder string A normal CSS values
buttonBorderRadius string A normal CSS values
buttonFont string Everything about the font, example values: "bold 15px roboto"
buttonTextColor string A normal CSS values
buttonMargin string A normal CSS values
Example usage
import { useState } from "react";
import Modal from "./components/Modal";

function App() {
const [show, setShow] = useState(false);
return (
    <div>
        <button onClick={() => setShow(true)}>Open Modal</button>
        <Modal
            onClose={() => setShow(false)}
            show={show}
            message="The modal is opened!"
            closeButton={true}
            borderRadius="5px"
            overflow="hidden"
            headerBackground="gray"
            addNewButton
            newButtonText="Go to..."
        />
    </div>
);
}
export default App;

Keywords

reactcomponentsmodal