React Modal

Simple re-usable Modal component built with React

Prerequisites

This library requires NodeJS (version 16.17.0 or later) and NPM. Node and NPM are really easy to install. To make sure you have them available on your machine, try running the following command.

$ npm -v && node -v
6.4.1
v8.16.0

Table of contents

• Project Name
  • Prerequisites
  • Table of contents
  • Getting Started
  • Installation
  • Usage
    • Import the Modal component
    • Customisation
    • CodeSandbox Demo
  • Built With
  • Authors
  • License

Getting Started

These instructions will show you how to install and use the Modal component on your project.

Installation

BEFORE YOU INSTALL: please read the prerequisites

To install and set up the library, run:

$ npm install @axda/react-modal

Usage

Import the Modal component

//import the useState hook from React library
import { useState } from "react";

// Import the Modal component from the library
import { Modal } from "@axda/react-modal";



const App = () => {

    // Implement the modal state (make sure to use the same name*)
    const [showModal, setShowModal] = useState(false);


    return (
        <>
            {/* Use an element to trigger the state change (e.g. button) */}
            <button onClick={() => setShowModal(prev => !prev)}>I'm a modal</button>
            {/* Use the Modal component (don't forget to add the showModal, setShowModal and modalStyle props) */}
            <Modal showModal={showModal} setShowModal={setShowModal}>
            {/* Insert the modal content here (e.g. text) */}
            </Modal>
        </>
    )
})

Customisation

...

const App = () => {

    ...

    // Add a modalStyle object and set your own values here
    const modalStyle = {
        modalOverlay: {
            background: '' // Default: 'rgba(0, 0, 0, .5)'
        },
        modalWrapper: {
            width: '', // Default: '500px'
            height: '', // Default: '200px'
            boxShadow: '', // Default: '0 5px 16px rgba(0, 0, 0, 0.2)'
            background: '', // Default: '#fff'
            borderRadius: '', // Default: '5px'
            border: '', // Default: 'none'
        },
        modalContent: {
            color: '', // Default: 'rgba(0, 0, 0, 0.8)'
            background: '', // Default: '#fff'
            fontSize: '', // Default: '1.5rem'
            fontWeight: '', // Default: '700'
            fontFamily: '' // Default: 'inherit'
        },
        closeModalButton: {
            color: '' // Default: 'rgba(0, 0, 0, 0.8)'
        }
    }


    return (
        <>
            ...

            {/* Add the modalStyle props */}
            <Modal showModal={showModal} setShowModal={setShowModal} modalStyle={modalStyle}>
            {/* Insert the modal content here (e.g. text) */}
            </Modal>
            ...
        </>
    )
})

Check this demo:

Built With

• VSCode
• React
• Styled Components

Authors

• Axda - Axda

License

MIT License