hrnet-modal-rp

modal with close button it can be draggable, and you can customize it whith css

Dependencies

• "react-draggable": "^4.4.4"

Install

**npm install hrnet-modal-rp** or **npm i hrnet-modal-rp** (--save option not neeeded since npm 5.0.0)
 or **yarn add hrnet-modal-rp**

Usage

See /example/src/App.js, if you get the github repository, you can test this component like this : in the main folder, open a terminal and do : cd example yarn start

import React, { Component } from 'react'

import HrnetModal from 'hrnet-modal-rp'
import 'hrnet-modal-rp/dist/index.css'

import './index.css';


const [isModalVisible, setModaleVisible] = useState(true);
  const handleModalResponse = () => {
      setModaleVisible(false);
}

class Example extends Component {
  render() {
    return <HrnetModal isDraggable='1' isModalVisible={isModalVisible} message='test' buttonLabel='Ok' handleModalResponse={handleModalResponse} />
  }
}

/* the root div */
.hrnet-modal-rp-div {
  min-height : 130px;
  min-width : 100px;

  border-radius: 5px;
  font-size: 0.9rem;
  font-weight: 900;

  justify-content: center; /* alignement vertical */

  background-color: yellow; /*rgba(139, 161, 26, 0.97); */
  box-shadow : 10px 10px 5px #718121;
  border: 1px dotted rgb(94, 92, 92)
}

/* the text message */
.hrnet-modal-rp-text{
  padding: 0 50px;
}

/* the main close button */
.hrnet-modal-rp-bt-1st {
  background-color: red;
}

/* the second close button */
.hrnet-modal-rp-bt-2d {
  right : -10px;
  top : -8px;
  margin-top: 0;
  font-size: 0.9rem;
  padding: 0 5px;
  border-radius: 20px;
  background-color: orange;
}

As you see, you have to :

• explain to the component when it have to be displayed with isDraggable props
• explain to the component the message to display with message props
• explain to the component the label of the button with buttonLabel props
• use useState to order to the component when it have to be displayed with isModalVisible and a handle that let the component hide himself

License

MIT © rpceri