https://github.com/crystallizeapi/react-growl
https://github.com/crystallizeapi/react-growl
Last synced: 7 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/crystallizeapi/react-growl
- Owner: CrystallizeAPI
- License: mit
- Created: 2018-03-13T12:08:37.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T01:46:01.000Z (about 3 years ago)
- Last Synced: 2024-11-07T23:41:29.325Z (about 1 year ago)
- Language: JavaScript
- Size: 3.17 MB
- Stars: 4
- Watchers: 3
- Forks: 2
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# @crystallize/react-growl
The [React Growl Notifications](https://crystallize.com/developers/react-components/react-growl-notifications) module used in [Crystallize PIM](https://pim.crystallize.com). This is a generic React package initially built for the [React boilerplates](https://crystallize.com/developers) powered by [Headless Ecommerce](https://crystallize.com/product).
## Install
```
yarn add @crystallize/react-growl styled-components framer-motion
```
or
```
npm install @crystallize/react-growl styled-components framer-motion
```
The module requires two peer dependencies which are used in [Crystallize PIM](https://pim.crystallize.com), `styled-components` and `framer-motion`
## Usage
### In Layout or somewhere outside the route definition:
```
import { GrowlScene } from '@crystallize/react-growl';
```
### 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: Hey, I can use JSX!,
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:
New message,
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