{"id":21043430,"url":"https://github.com/crystallizeapi/react-growl","last_synced_at":"2025-06-21T22:33:42.540Z","repository":{"id":30475735,"uuid":"125045766","full_name":"CrystallizeAPI/react-growl","owner":"CrystallizeAPI","description":null,"archived":false,"fork":false,"pushed_at":"2023-01-06T01:46:01.000Z","size":3319,"stargazers_count":4,"open_issues_count":10,"forks_count":2,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-11-07T23:41:29.325Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/CrystallizeAPI.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-03-13T12:08:37.000Z","updated_at":"2023-02-13T06:35:03.000Z","dependencies_parsed_at":"2023-01-14T17:16:03.626Z","dependency_job_id":null,"html_url":"https://github.com/CrystallizeAPI/react-growl","commit_stats":null,"previous_names":[],"tags_count":34,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CrystallizeAPI%2Freact-growl","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CrystallizeAPI%2Freact-growl/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CrystallizeAPI%2Freact-growl/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CrystallizeAPI%2Freact-growl/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/CrystallizeAPI","download_url":"https://codeload.github.com/CrystallizeAPI/react-growl/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225365804,"owners_count":17462973,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-19T14:12:47.855Z","updated_at":"2024-11-19T14:12:48.709Z","avatar_url":"https://github.com/CrystallizeAPI.png","language":"JavaScript","readme":"![alt text](https://raw.githubusercontent.com/CrystallizeAPI/react-growl/HEAD/media/logo.png 'Abstract robot with teeths')\n\n# @crystallize/react-growl\n\nThe [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).\n\n![alt text](https://raw.githubusercontent.com/CrystallizeAPI/react-growl/HEAD/media/react-growl.gif 'Growl notifications preview')\n\n## Install\n\n```\nyarn add @crystallize/react-growl styled-components framer-motion\n```\n\nor\n\n```\nnpm install @crystallize/react-growl styled-components framer-motion\n```\n\nThe module requires two peer dependencies which are used in [Crystallize PIM](https://pim.crystallize.com), `styled-components` and `framer-motion`\n\n## Usage\n\n### In Layout or somewhere outside the route definition:\n\n```\nimport { GrowlScene } from '@crystallize/react-growl';\n\n\u003cbody\u003e\n    \u003cGrowlScene /\u003e\n    \u003cMyApp /\u003e\n\u003c/body\u003e\n```\n\n### Call it!\n\n```\nimport { growl } from '@crystallize/react-growl';\n\n// Regular\nconst myGrowl = await growl({\n    title: 'Good job',\n    message: 'You got this growl to work!'\n});\n\n// With JSX and a type\nconst myGrowl = await growl({\n    title: 'Title goes here',\n    message: \u003cb\u003eHey, I can use JSX!\u003c/b\u003e,\n    type: 'error'\n});\n\n// Sticky, user cannot close it\nconst myGrowl = await growl({\n    title: \"I'm sticky\",\n    message: 'You just try to remove me!',\n    sticky: true\n});\n\n// Custom timeout\nconst myGrowl = await growl({\n    title: \"I'll go away quickly\",\n    message: 'It will only be in your life for 2 seconds',\n    timeout: 2000\n});\n```\n\n## Growl props\n\n| Prop name | Type    | Default                     | Description                                                                            |\n| --------- | ------- | --------------------------- | -------------------------------------------------------------------------------------- |\n| type      | string  | info                        | The type of growl. One of \"info\", \"warning\" or \"error\"                                 |\n| timeout   | number  | (inherited from GrowlScene) | Set a custom timeout (in milliseconds) for the growl instance                          |\n| title     | string  | null                        | The title                                                                              |\n| message   | string  | null                        | The message                                                                            |\n| sticky    | boolean | false                       | If the growl should \"stick\" to the screen and hide the close button and not auto close |\n\n## Growl instance\n\nWhen you call growl, you can await the growl instance. On the instance you have the following methods available\n\n### instance.update\n\n```\nmyGrowl.update({\n    type: 'warning',\n    title: 'New title',\n    message: \u003cdiv\u003eNew message\u003c/div\u003e,\n    sticky: true\n})\n```\n\nTakes the same arguments as growl(). Updates the growl in-place.\n\n### instance.hide\n\n```\nmyGrowl.hide()\n```\n\nHide the growl manually, because it is a static growl, or because you do not want to wait for the auto timeout.\n\n## GrowlScene props\n\n| Prop name      | Type      | Default |\n| -------------- | --------- | ------- |\n| growlComponent | Component | null    |\n| defaultTimeout | number    | 7000    |\n\nWhatever other props you pass will be forwarded along to the underlying UL\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcrystallizeapi%2Freact-growl","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcrystallizeapi%2Freact-growl","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcrystallizeapi%2Freact-growl/lists"}