react-dialogue-component

A simple React component made with styled-components

Table of Contents

• Getting started
• Props

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	❌
children	ReactNode, string		The description text for the component to render	❌
isOpen	boolean	false	Define if dialogue appear on screen	✔️
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"	✔️
closeOnOverlayClick	boolean	false	If is true onClose is called when user click on dialogue overlay	✔️

Run Local

1. Clone this repository.

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

2. Go to project folder.

cd react-dialogue-component

3. Install the dependencies using yarn or npm

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