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 | :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

1. Clone this repository.

 git clone [email protected]: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