@crystallize/react-growl
v3.2.0
Published
Accessible React package to do growl feedback
Downloads
28
Readme
@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.
Install
yarn add @crystallize/react-growl styled-components framer-motionor
npm install @crystallize/react-growl styled-components framer-motionThe 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