{"id":18435636,"url":"https://github.com/peak-ai/flashr","last_synced_at":"2025-07-20T09:33:59.082Z","repository":{"id":42897407,"uuid":"253157309","full_name":"peak-ai/flashr","owner":"peak-ai","description":"Flash message made simple with redux","archived":false,"fork":false,"pushed_at":"2023-03-04T10:21:15.000Z","size":171,"stargazers_count":7,"open_issues_count":7,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-23T00:07:15.387Z","etag":null,"topics":["flash-messgae","flashr","notifications","react-notifications","redux"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-3-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/peak-ai.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":".github/CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-04-05T04:45:16.000Z","updated_at":"2022-12-16T08:57:49.000Z","dependencies_parsed_at":"2023-01-21T15:16:47.286Z","dependency_job_id":null,"html_url":"https://github.com/peak-ai/flashr","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/peak-ai%2Fflashr","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/peak-ai%2Fflashr/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/peak-ai%2Fflashr/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/peak-ai%2Fflashr/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/peak-ai","download_url":"https://codeload.github.com/peak-ai/flashr/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247725470,"owners_count":20985705,"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":["flash-messgae","flashr","notifications","react-notifications","redux"],"created_at":"2024-11-06T06:08:56.072Z","updated_at":"2025-04-07T20:32:12.624Z","avatar_url":"https://github.com/peak-ai.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Flashr\n\nFlash Messages handling with redux made simple.\n\n![](https://nodeico.herokuapp.com/@peak-ai/flashr.svg)\n\n![](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat)\n![](https://img.shields.io/librariesio/release/npm/@peak-ai/flashr)\n![](https://img.shields.io/bundlephobia/minzip/@peak-ai/flashr)\n![](https://img.shields.io/npm/dw/@peak-ai/flashr)\n![](https://img.shields.io/github/issues/peak-ai/flashr)\n![](https://img.shields.io/github/license/peak-ai/flashr)\n![](https://img.shields.io/npm/v/@peak-ai/flashr)\n![](https://img.shields.io/github/contributors/peak-ai/flashr)\n![](https://img.shields.io/github/languages/top/peak-ai/flashr)\n![](https://img.shields.io/snyk/vulnerabilities/npm/@peak-ai/flashr)\n![](https://img.shields.io/github/workflow/status/peak-ai/flashr/Lint%20and%20Build)\n\n## To install\n\n```bash\nnpm install --save @peak-ai/flashr\n# or\nyarn add @peak-ai/flashr\n```\n\n## Implementation\n\n#### _Add Reducer_\n\n```js\nimport { createFlashReducer } from '@peak-ai/flashr';\nconst flashMessages = createFlashReducer(config);\nconst reducers = {\n  // ... your other reducers ...\n  flashMessages,\n};\nconst rootReducer = combineReducers(reducers);\n```\n\n#### _Add Redux Middleware_ (_Only needed if want to use hooks_)\n\n```js\nimport { createFlashMiddleware } from '@peak-ai/flashr';\nconst { middleware } = createFlashMiddleware({});\nconst store = createStore(rootReducer, applyMiddleware(middleware));\n```\n\n## Config\n\n#### _Create Reducer Config_\n\n```typescript\ninterface Config {\n  /*\n    Timeout after which notification should be removed.\n    This can be overridden in addFlashMessage API.\n    Default: 5000\n  */\n  timeout: number;\n  /*\n    Position on the screen where the notification should appear.\n    This can be overridden in addFlashMessage API.\n    Default: 'left-top'\n  */\n  position:\n    | 'left-top'\n    | 'center-top'\n    | 'right-top'\n    | 'left-bottom'\n    | 'center-bottom'\n    | 'right-bottom';\n  /*\n    Internally we maintain a queue for handling messages, this param gives only the desired number of messages at any point in time, rest will be available in the queue and added as messages are removed from message array.\n    Default: 3\n  */\n  stackCount: number;\n  /*\n    The above-said queue is a priority queue, this parameter tells if needs to be sorted.\n    Default: false\n  */\n  sortQueue: boolean;\n  /*\n    The above-said queue accepts custom comparator function, which somewhat works like Array.prototype.sort's callback function.\n    It provides 2 numbers as input, a and b, return less than 0 if a is small || greater than 0 if b is small.\n    For more insight see usage at `src/queue.ts:L26`\n    Default: (a, b) =\u003e a - b; \n    Higher priority elements dequeue first.\n  */\n  comparator: Comparator;\n  /*\n    This function is used to create a unique id for every notification object.\n    Default: uuid/v4\n  */\n  keyFunction: () =\u003e string;\n  /*\n    Notification can have an action associated with them, like undo, stop etc...\n    This can be overridden in addFlashMessage API.\n  */\n  onActionClick: () =\u003e void;\n  /*\n    This in general onClick which can be used to add click on complete notification\n    This can be overridden in addFlashMessage API.\n  */\n  onClick: () =\u003e void;\n}\n```\n\n#### _Create Redux Middleware Config_\n\n```typescript\ninterface Config {\n  /*\n    Optional\n    With middleware you can hook custom functions before a message is added to the queue and after a message is added. this flag is used to disable those hooks.\n    Default: false\n  */\n  disableHooks: boolean;\n}\n```\n\n#### _Hooks_\n\n_When you create middleware, the function returns an object called hooks, which can be tapped with custom functions_\n\n```typescript\nconst {\n  middleware,\n  hooks: { preAdd, postAdd },\n} = createFlashMiddleware({});\n\npreAdd.tap('PreAddAction', (action) =\u003e {\n  console.log(action);\n});\n\npostAdd.tap('PostAddAction', () =\u003e {\n  console.log('PostAddAction');\n});\n```\n\n## Action Creators\n\n#### _addFlashMessage_\n\n```typescript\ninterface Message {\n  /*\n    Required*\n    Text to be displayed in notification\n  */\n  message: string;\n  /*\n    Optional\n    Message type, like success, error, warn, etc..\n    Default: text  \n  */\n  messageType: string;\n  /*\n    Optional\n    Override specific timeout for single notification\n    Default: text  \n  */\n  timeout: number;\n  /*\n    Optional\n    Override specific position for single notification\n    Default: 'left-top'  \n  */\n  position: string;\n  /*\n    Optional\n    Icon for notification\n  */\n  icon: string;\n  /*\n    Optional\n    Override onActionClick for single notification\n  */\n  onActionClick: () =\u003e void;\n  /*\n    Optional\n    Override onClick for single notification\n  */\n  onClick: () =\u003e void;\n  /*\n    Optional\n    Add optional class to add in notification\n  */\n  className: string;\n  /*\n    Optional\n    Add priority to a message\n    When enabled sorting of queue (see sortQueue Option), comparator function is called, if passed, else use maxComparator function, higher priority elements at first in the queue.\n    Default: 0\n  */\n  priority: number;\n}\n```\n\n#### _clearFlashMessage_\n\n```typescript\ninterface ClearMessage {\n  /*\n    Removes notification from message array for given id. Currently, there is no option to remove messages from the queue, except clearAll.\n  */\n  id: string;\n}\n```\n\n#### _clearAll_\n\nNo params needed _that is easy_\n\n#### _Action Constants Exported_\n\n- _ADD_MESSAGE_\n- _CLEAR_MESSAGE_\n- _CLEAR_ALL_MESSAGES_\n\n## License\n\nBSD-3-Clause\n\n## Release Process\n\n- Please place credentials for the `peak-ai` npm account in an `.npmrc` file at the root of project or in home directory.\n- Do `yarn build`.\n- Run `npm version \u003cversion\u003e` command. If you want to release a RC version, run `npm version prerelease --preid=rc`.\n- Run `npm publish --tag next` command.\n- Commit and push the changes.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpeak-ai%2Fflashr","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpeak-ai%2Fflashr","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpeak-ai%2Fflashr/lists"}