react-relax-modal v0.2.3

react-relax-modal

A easy Modal system for Web React Apps

Table of Contents

• Installation
• Examples
• RelaxModalProvider Props
• Modal Config Props

Installation

To install, you can use npm or yarn:

$ npm install --save react-relax-modal
$ yarn add react-relax-modal

Examples

Here is a simple example of react-relax-modal being used in an app

import {RelaxModalProvider, useRelaxModal} from "react-relax-modal";

const modalStyle = {
  width: 200,
  height: 200,
  display: "flex",
  borderRadius: "5px",
  alignItems: "center",
  justifyContent: "center",
  backgroundColor: "white",
};

const MyModal = () => {
    return (
        <div style={modalStyle}>
            <span>Hello World!</span>
        </div>
    );
};

const Screen = () => {
    const {openModal} = useRelaxModal();
    return <button onClick={() => openModal(<MyModal />)}>Open My Modal</button>;
};

function App() {
    return (
        <RelaxModalProvider>
            <Screen />
        </RelaxModalProvider>
    );
}

export default App;

You can find examples in the examples directory, which you can run in a local development server using npm start or yarn run start.

RelaxModalProvider Props

RelaxModalProvider accepts props to set a global configuration and/or get a debug helper for your development process

function App() {
    return (
        <RelaxModalProvider {/**props */}>
            {...}
        </RelaxModalProvider>
    );
}

Modal Config

Each time that you call openModal to open a new modal component you can add configuration object that only will affect that Modal

<button onClick={() => openModal(<YourModalComponent />, {/**config */})}>
    Open Modal
</button>