react-dialogue-component

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

1. Go to project folder.

cd react-dialogue-component

1. 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