modal_rjmv v0.3.0

Simple-component-library of React components created using create-react-app

Project realized by Jean Marie Vianey RABEMANALINA

To install the library:

npm install modam_rjmv

How import the library

Import {Modal} from 'modam_rjmv'

Prerequisites

• @babel/cli (version 7.12.1)
• NPM (version 8.19.2)
• REACT (version 18.2.0)
• React-dom(version 18.2.0)
• VsCode
• @babel/core
• @babel/preset-env
• styled-components

Usage/Example

You can change the color of modal's background, you can also change the color of the modal. You can change the text and also its color and size inside the modal. You can decide which icon you want (success or error) or not put iconModal on the custom parameters. And also you can change the shadow and the border-radius of the modal. If you decide not to use one, just comment or not write it and it will not appear inside the modal.

For example, I have used:

  backgroundColor="#16a92069"
  colorModal="rgba(215, 246, 207, 1)"
  iconModal="success"
  borderModal="40px"
  content="Hello world!"
  contentcolor="green"
  shadowModal="0 5px 16px rgba(18, 39, 3, 1)"
  font-size="1rem"

import { Modal } from "modam_rjmv";
import { useState } from "react";
function App() {
  const [showModal, setShowModal] = useState(false);

  const openModal = () => {
    setShowModal((prev) => !prev);
  };

  return (
    <div className="App">
      <button onClick={openModal}>Click Me</button>
      <Modal
        showModal={showModal}
        setShowModal={setShowModal}
        //your custom parameters
        backgroundColor="#16a92069"
        colorModal="rgba(215, 246, 207, 1)"
        iconModal="success"
        borderModal="40px"
        content="Hello world!"
        contentcolor="green"
        shadowModal="0 5px 16px rgba(18, 39, 3, 1)"
        fontSizeModal="2rem"
        //your custom parameters
      />
    </div>
  );
}

export default App;

Setup

Here an example