react-interaction

Collection of components for interaction

Usage no npm install needed!

<script type="module">
  import reactInteraction from 'https://cdn.skypack.dev/react-interaction';
</script>

README

react-interaction

Collection of components for interaction

NPM JavaScript Style Guide

📢️ Please check it. Currently, this module supports React 16.8 and later.

Components

  • Toast popup
  • Notice
  • Check
  • Tooltip

Demo

Example

Install

npm install --save react-interaction

Usage

import { toast, notice, check, Tooltip } from 'react-interaction';

Toast

toast(message, options)

options

Name Type Default Description
time number 3000 The millisecond time that the message is displayed.
className string
style CSSProperties

Notice

Promise based notice component such as alert

notice(message, options).then(() => console.log('closed'));

options

Name Type Default Description
dimmedClassName string
dimmedStyle CSSProperties
contentClassName string
contentStyle CSSProperties
messageClassName string
messageStyle CSSProperties
okClassName string
okStyle CSSProperties
okText string 'OK'

Check

Promise based check component such as confirm

check(message, options).then(isConfirmed => console.log(isConfirmed));

options

Name Type Default Description
dimmedClassName string
dimmedStyle CSSProperties
contentClassName string
contentStyle CSSProperties
messageClassName string
messageStyle CSSProperties
okClassName string
okStyle CSSProperties
okText string 'OK'
cancelClassName string
cancelStyle CSSProperties
cancelText string 'Cancel'

Tooltip

The position of the tooltip is calculated automatically.

<Tooltip message="Tooltip message">tooltip</Tooltip>

props

Name Type Default Description
style CSSProperties
className string
message ReactNode
messageStyle CSSProperties
messageClassName string
toggle boolean false

License

MIT © almond-bongbong