plutchik-reactjs-components

Library PLUTCHIK-REACTJS-COMPONENTS

How to use

Flower component

Pending component

Toaster component

Release notes

• Release 1.2.3 (2024-08-08): Componets Toast and Toaster addedd

Components

Flower

Flower component is the simple way to present Plutchik vector. It has eight leafs. Each leaf if the basic emotion.

Flower properties

Member	Type	Mandatory	Description
vector	IEmotionVector	Yes	Vector to show on flower
width	string	Yes	Width of ocmponent in css format
gridArea	string	No	You can point to special grid area where the component must be shown

Pending

Pending component shows to user that internal process is to be countinued and user's input is unaccessable. Pending component has two methods incUse and decUse which increase or decrease internal count of use. If internal count of use is equal zero then component hides any its visible elements. If the internal count is positive then Pending component cover all accessable to it area of page from user input and shows the animation with plutchik wheel

Pending component Properties

The Pending component has no properties

Pending component Methods

Method	Description	Parameters
incUse	Increase use counter. If internal counter of useness is more zero, then pending control is visible	No parameters
decUse	Decrease internal use counter. If internal counter of useness is equal zero, then pending control is invisible	No parameters

Pending component example

class App extends React.Component<{}, {}>{
    pendingRef: React.RefObject<Pending> = React.createRef();
    toDoSomethingAsync() {
        this.pendingRef.current?.incUse()
        asyncFuncWithCallback (param1, (success) => {
            this.pendingRef.current?.decUse()
            ...
        }, (error) => {
            this.pendingRef.current?.decUse()
            ...
        })
    }
    render: React.Node {
        return <div>
            <Pending ref={pendingRef}/>
        </div>
    }
}

Toast and Toaster

Toast is a pop-up window with message using to inform user about something. Toast can be of three types: info, warrning and error. Use ToastType enum for choosing toast's type. Toaster creates the Toasts by addToast method

Toaster

Toaster properties

Member	Type	Mandatory	Description
placeCount	number	Yes	The count of places to arrange the toasts. This property is the count of toasts which are visible simultaneously

Toaster methods

Method	Description	Parameters
addToast	Adds new Toast to the Toaster. See the IToast interface to configure th new Toast	newToast: IToast

IToast interface members

To create new Toast use the addToast method of Toaster class. addToast method has one parameter of IToast interface with members:

Member	Type	Mandatory	Description
type	string of ToastType enum	Yes	One of three types: info, warning, or error
code	number	No	Reserved for future use
message	string	Yes	Main message of toast. It's always visible if the toast is visible
description	string	No	Extra message. If description is defined then Toast has ∴ button. User can see the description if ∴ button clicked by user.
autohide	number	No	Count of seconds when the toast will be dissapeared without the user interaction. If autohide is undefined and the type of Toast is info, then Toaster set the 3 seconds to autohide as default
saveInHistory	boolean	No	If this parameter is set true then the Toast won't be deleted from Toaster on hide event. It will be marked as shown and will be saved in the Toaster for future use
modal	boolean	No	If Toaster has at least one not shown modal Toast then Toaster covers all accessible area and prohibit interaction with other elements on page. Use modal parameter if you want stop user interaction while user reads the message and close the Toast

How to use

Run command in command-line npm i plutchik-reactjs-components

Add string into your javascript or Typescript

import { Charts, ComplexEmotion, Emotion, Flower, Formula, Chart, IEmotionVector, Pending, Toaster, ToastType, } from 'plutchik-reactjs-components'