@crystallize/react-growl NPM

@crystallize/react-growl

The React Growl Notifications module used in Crystallize PIM. This is a generic React package initially built for the React boilerplates powered by Headless Ecommerce.

alt text

Install

yarn add @crystallize/react-growl styled-components framer-motion

npm install @crystallize/react-growl styled-components framer-motion

The module requires two peer dependencies which are used in Crystallize PIM, styled-components and framer-motion

Usage

In Layout or somewhere outside the route definition:

import { GrowlScene } from '@crystallize/react-growl';

<body>
    <GrowlScene />
    <MyApp />
</body>

Call it!

import { growl } from '@crystallize/react-growl';

// Regular
const myGrowl = await growl({
    title: 'Good job',
    message: 'You got this growl to work!'
});

// With JSX and a type
const myGrowl = await growl({
    title: 'Title goes here',
    message: <b>Hey, I can use JSX!</b>,
    type: 'error'
});

// Sticky, user cannot close it
const myGrowl = await growl({
    title: "I'm sticky",
    message: 'You just try to remove me!',
    sticky: true
});

// Custom timeout
const myGrowl = await growl({
    title: "I'll go away quickly",
    message: 'It will only be in your life for 2 seconds',
    timeout: 2000
});

Growl props

Prop name	Type	Default	Description
type	string	info	The type of growl. One of "info", "warning" or "error"
timeout	number	(inherited from GrowlScene)	Set a custom timeout (in milliseconds) for the growl instance
title	string	null	The title
message	string	null	The message
sticky	boolean	false	If the growl should "stick" to the screen and hide the close button and not auto close

Growl instance

When you call growl, you can await the growl instance. On the instance you have the following methods available

instance.update

myGrowl.update({
    type: 'warning',
    title: 'New title',
    message: <div>New message</div>,
    sticky: true
})

Takes the same arguments as growl(). Updates the growl in-place.

instance.hide

myGrowl.hide()

Hide the growl manually, because it is a static growl, or because you do not want to wait for the auto timeout.

GrowlScene props

Prop name	Type	Default
growlComponent	Component	null
defaultTimeout	number	7000

Whatever other props you pass will be forwarded along to the underlying UL

ui react growl

mitt

@infinitebrahmanuniverse/nolb-_cry @everything-registry/sub-chunk-206 @zalastax/nolb-_cry

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago