info-modal-component
v0.2.6
Published
An user-friendly, lightweight and customisable pop up which display your message in a modal
Downloads
8
Maintainers
Readme
Modal - React Component
General information
An user-friendly, lightweight and customizable pop up which display your message in a modal
Install & Setup
Step 1 (required) :
To install, you can use npm or yarn:
$ npm install --save info-modal-component
$ yarn add info-modal-component
Step 2 (required) :
To import the component, add :
import { InfoModal } from 'info-modal-component'
Step 3 (required) :
To setup the component's state, add :
const [isModalOpen, setIsModalOpen] = useState(false)
Step 4 (required) :
To use the component's state, pass it as prop :
<InfoModal setIsModalOpen={setIsModalOpen} />
Step 5 (optional):
To custom the composant (...or not), take a look below and add what you need with props :
<InfoModal
setIsModalOpen={setIsModalOpen}
// Customization //
TitleTextAlign={'center'}
InformationTextAlign={'center'}
/>
Usage
You can use it like a simple React component in your React project
import { InfoModal } from 'info-modal-component'
const [isModalOpen, setIsModalOpen] = useState(false)
{
isModalOpen ? (
<InfoModal
setIsModalOpen={setIsModalOpen}
// Set your Props here to custom the component //
/>
) : null
}
Props
| Props | Type | Description |
| :--------------------- | :------- | :-------------------------------------------------------------------------- |
| title
| string
| title of your modal (i.e 'Hello world')
|
| information
| string
| message of your modal (i.e 'Welcome')
|
| modalBg
| string
| colour value of your modal's background (i.e '#ffffff')
|
| TitleTextAlign
| string
| position of your text (i.e 'left', 'center' or 'right')
|
| TitleTextColor
| string
| colour value of your modal's title (i.e '#0000FF')
|
| InformationTextAlign
| string
| position of your text (i.e 'left', 'center' or 'right')
|
| InformationTextColor
| string
| colour value of your modal's message (i.e ' #0000FF')
|
| ValidationBtnBgColor
| string
| colour value of your modal's validation button background (i.e '#ffffff')
|
| ValidationBtnColor
| string
| colour value of your modal's validation button (i.e ' #0000FF')
|
Exemple
import React from 'react'
import { useState } from 'react'
import { InfoModal } from 'info-modal-component'
function App() {
const [isModalOpen, setIsModalOpen] = useState(false)
const handleOpenModalClick = () => {
setIsModalOpen(true)
}
return (
<main
style={{
width: '100vw',
height: '100vh',
position: 'absolute',
zIndex: '5',
top: '50%',
left: '50%',
background: 'rgba(0, 0, 0, 0.2)',
transform: 'translate(-50%, -50%)',
}}
>
<button
style={{
width: 200,
height: 100,
padding: 5,
position: 'fixed',
top: '50%',
left: '50%',
transform: 'translate(-50%, -50%)',
borderRadius: 25,
fontSize: 20,
background: 'rgba(255, 246, 235, 1)',
}}
onClick={() => {
handleOpenModalClick()
}}
>
Open Modal
</button>
{isModalOpen ? (
<InfoModal
setIsModalOpen={setIsModalOpen}
/// Props ///
title={'Hello World'}
information={'Welcome !!!'}
modalBg={
'radial-gradient(circle, rgba(255, 246, 235, 1) 0%, rgba(255, 228, 196, 1) 70%)'
}
TitleTextAlign={'center'}
TitleTextColor={'#00bc77'}
InformationTextAlign={'center'}
InformationTextColor={'#257b5a'}
ValidationBtnBgColor={'transparent'}
ValidationBtnColor={'#257b5a'}
/>
) : null}
</main>
)
}
export default App
Screenshot
Custom
Default
License
License MIT