React-dialogue-component NPM

react-dialogue-component

A simple React component made with styled-components

Example gif

Getting started

Installing

To install, you can use npm or yarn:

$ npm install --save react-dialogue-component
$ yarn add react-dialogue-component

Example

  import { useState } from "react";
  import { Dialogue } from "react-dialogue-component";
  
  export default function App() {
  const [dialogue, setDialogue] = useState(false);
  return (
    <div>
      <button
      onClick={() => setDialogue(!dialogue)}
      >
        active dialogue
      </button>
      <Dialogue
        isOpen={dialogue}
        onClose={() => setDialogue(false)}
        closeOnOverlayClick
        title="React Dialogue Demo"
        children="Dialogue example"
      />
    </div>
  );
}

Demo of this example

Docs

Props

Name	Type	Default	Description	Required
title	string		The title of the dialogue	:x:
children	ReactNode, string		The description text for the component to render	:x:
isOpen	boolean	false	Define if dialogue appear on screen	:heavy_check_mark:
onClose	function	() => void	Triggerd when the user performs some modal closing action the default actions are called when user press Esc button or click in close button "X"	:heavy_check_mark:
closeOnOverlayClick	boolean	false	If is true onClose is called when user click on dialogue overlay	:heavy_check_mark:

Run Local

Clone this repository.

 git clone git@github.com:UmberBn/react-dialogue-component.git

Go to project folder.
```
cd react-dialogue-component
```

3. Install the dependencies using yarn or npm

 ```bash
 yarn
 or
 npm install

Scripts

For execute a script you need to clone this repository and install the project dependencies See Local section

Run all tests
```
  "npm|yarn" test
```
Generate the coverage of tests
```
  "npm|yarn" run test:coverage
```
Open the coverage file (run after test:coverage)
You need google chrome.
```
  "npm|yarn" run open:coverage
```