3.0.31 • Published 8 months ago

@uireact/dialog v3.0.31

Weekly downloads
-
License
GNU
Repository
-
Last release
8 months ago

@UiReact

UiReact icon

This is a React UI library, that defines a customizable theme object that powers all colorations, texts, sizes, etc.. Across your react application.

We are built using framer-motion for great animations and styled-components for easy CSS management.

You should visit our docs page for all information @uireact docs.

@uireact/dialog

This package exports UiDialog and useDialog used to render and control dialogs.

We have a page dedicated to this component @uireact/dialog docs.

Usage

Get @UiReact library working

First step is to get the library working for this you can look at this doc: Getting started.

Install package

If using npm:

npm i -S @uireact/dialog

Use it

import React from 'react';

import { UiButton } from '@uireact/button';
import { UiText } from '@uireact/text';
import { 
  UiDialog, 
  UiDialogType, 
  useDialog 
} from '@uireact/dialog';

export const DialogsExample = () => {
  const dialogId = 'someFancyDialogId';
  // Instantiating the dialog hook with a dialogId : string
  const { isOpen, actions } = useDialog(dialogId); 

  React.useEffect(() => {
    if (isOpen) {
      // Do something fancy if the dialog is opened, maybe tracking analytics?
    }
  }, [isOpen]);

  const onClickCB = React.useCallback(() => {
    // This open dialog function internally triggers the open dialog fn in the dialog controller and it passes the dialog id that was used in the useDialog hook.

    actions.openDialog(); 
  }, [actions]);

  return (
    <>
      <UiButton onClick={onClickCB}>Open dialog</UiButton>
      <UiDialog dialogId={dialogId}>
        <UiText>Dialog content</UiText>
      </UiDialog>
    </>
  );
};
3.0.31

8 months ago

3.0.23

12 months ago

3.0.24

12 months ago

3.0.21

1 year ago

3.0.22

12 months ago

3.0.27

12 months ago

3.0.28

12 months ago

3.0.25

12 months ago

3.0.26

12 months ago

3.0.20

1 year ago

3.0.30

12 months ago

3.0.29

12 months ago

3.0.16

1 year ago

3.0.17

1 year ago

3.0.14

1 year ago

3.0.15

1 year ago

3.0.18

1 year ago

3.0.19

1 year ago

3.0.13

1 year ago

3.0.12

1 year ago

3.0.10

1 year ago

3.0.11

1 year ago

3.0.8

1 year ago

3.0.7

1 year ago

3.0.6

1 year ago

3.0.9

1 year ago

3.0.4

1 year ago

3.0.3

1 year ago

3.0.2

1 year ago

3.0.1

1 year ago

3.0.5

1 year ago

2.6.5

1 year ago

2.6.4

1 year ago

2.6.3

1 year ago

2.6.2

1 year ago

2.4.0

1 year ago

2.6.1

1 year ago

2.6.0

1 year ago

2.5.0

1 year ago

2.3.0

1 year ago

2.2.0

1 year ago

2.1.8

1 year ago

2.1.7

1 year ago

1.2.0

2 years ago

1.0.16

2 years ago

1.4.4

2 years ago

1.6.1

2 years ago

1.4.3

2 years ago

1.6.0

2 years ago

1.4.2

2 years ago

1.4.1

2 years ago

1.4.0

2 years ago

1.2.1

2 years ago

2.0.3

2 years ago

2.0.2

2 years ago

2.0.1

2 years ago

1.1.1

2 years ago

1.1.0

2 years ago

1.3.3

2 years ago

1.1.5

2 years ago

1.5.0

2 years ago

1.3.2

2 years ago

1.1.4

2 years ago

1.3.1

2 years ago

1.1.3

2 years ago

1.3.0

2 years ago

1.1.2

2 years ago

2.1.2

2 years ago

2.1.1

2 years ago

2.1.4

2 years ago

2.1.3

2 years ago

2.1.6

2 years ago

2.1.5

2 years ago

2.1.0

2 years ago

1.0.11

2 years ago

1.0.15

2 years ago

1.0.14

2 years ago

1.0.13

2 years ago

1.0.12

2 years ago

1.0.2

2 years ago

1.0.1

2 years ago

1.0.9

2 years ago

1.0.8

2 years ago

1.0.7

2 years ago

1.0.6

2 years ago

1.0.5

2 years ago

1.0.4

2 years ago

1.0.3

2 years ago

0.5.1-alpha.21

2 years ago

0.6.3

2 years ago

1.0.10

2 years ago

0.6.2

2 years ago

0.5.3

2 years ago

0.5.1-alpha.19

2 years ago

0.6.4

2 years ago

0.6.1

2 years ago

0.5.2

2 years ago

0.6.0

2 years ago

0.5.1

2 years ago

0.5.0

2 years ago

0.4.0

2 years ago