{"id":18336314,"url":"https://github.com/launchpadlab/redux-flash","last_synced_at":"2025-06-24T21:36:19.243Z","repository":{"id":21369681,"uuid":"92326700","full_name":"LaunchPadLab/redux-flash","owner":"LaunchPadLab","description":"Redux action creators for displaying flash messages","archived":false,"fork":false,"pushed_at":"2024-10-27T20:04:56.000Z","size":183,"stargazers_count":12,"open_issues_count":8,"forks_count":2,"subscribers_count":15,"default_branch":"main","last_synced_at":"2025-05-27T18:58:42.104Z","etag":null,"topics":["flash-messages","redux"],"latest_commit_sha":null,"homepage":"","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/LaunchPadLab.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-05-24T19:00:57.000Z","updated_at":"2023-07-07T01:37:20.000Z","dependencies_parsed_at":"2024-06-19T01:40:14.339Z","dependency_job_id":"a0005d8f-edd5-40fe-ab0d-1d7239deb2d1","html_url":"https://github.com/LaunchPadLab/redux-flash","commit_stats":null,"previous_names":[],"tags_count":15,"template":false,"template_full_name":null,"purl":"pkg:github/LaunchPadLab/redux-flash","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LaunchPadLab%2Fredux-flash","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LaunchPadLab%2Fredux-flash/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LaunchPadLab%2Fredux-flash/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LaunchPadLab%2Fredux-flash/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/LaunchPadLab","download_url":"https://codeload.github.com/LaunchPadLab/redux-flash/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LaunchPadLab%2Fredux-flash/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261759899,"owners_count":23205634,"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-messages","redux"],"created_at":"2024-11-05T20:07:27.469Z","updated_at":"2025-06-24T21:36:18.863Z","avatar_url":"https://github.com/LaunchPadLab.png","language":"JavaScript","readme":"# redux-flash\n*Redux action creators for displaying flash messages.*\n\n[![NPM version](https://img.shields.io/npm/v/redux-flash.svg?style=flat-square)](https://www.npmjs.com/package/redux-flash)\n\nThis library provides a simple way to manage flash messages in Redux applications. It includes action creators for creating configurable flash messages as well as selectors for accessing those messages from anywhere in your application.\n\n### Migration guides\n\n- [v2.0.0](migration-guides/v2.0.0.md)\n\n## Example\n\n```javascript\n\nimport { applyMiddleware, createStore, combineReducers } from 'redux'\nimport {\n    reducer as flashReducer,\n    middleware as flashMiddleware,\n    flashMessage,\n    getFlashMessages,\n} from 'redux-flash'\n\n// First, include the flash reducer keyed under 'flash' in your root reducer\n\nconst reducer = combineReducers({\n    flash: flashReducer\n    ...\n})\n\n// Then, apply the flash middleware when creating the store\n\nconst store = createStore(reducer, {}, applyMiddleware(flashMiddleware()))\n\n// Now you can dispatch flash actions\n\nconst action = flashMessage('This is a test message!')\nstore.dispatch(action)\n\n// And access messages from the state\n\nconst state = store.getState()\n\ngetFlashMessages(state)\n// =\u003e\n// [{\n//    id: 1495649041702,\n//    message: 'This is a test message!',\n//    isError: false,\n//    props: {}\n// }]\n\n```\n\n## API\n\n### Action creators\n\n`redux-flash` exposes the following action creators:\n\n- `flashMessage(message, options)`: Create a flash message with a given message string.\n- `flashErrorMessage(message, options)`: Create a flash message with the `isError` option flag set to `true`.\n- `flashSuccessMessage(message, options)`: An alias for `flashMessage()`.\n- `clearMessages()`: Clear all flash messages.\n- `removeMessage(messageID)`: Clear a particular flash message.\n\nThe `options` object passed to these action creators may contain the following attributes:\n\n- `push`: A flag indicating that *only* the new message should be shown. Internally calls `clearMessages()` before adding the new message.\n- `isError`: A flag indicating whether the message is an error message.\n- `timeout`: A timeout (ms) after which the message will be removed (default: `3000`). If this value is `false`, the message will persist indefinitely.\n- `props`: Any additional values to pass to the message object.\n\n### Middleware\n\nYou can also modify the behavior of flash messages globally by passing options to the flash middleware:\n\n```javascript\nconst flashOptions = { timeout: 5000 }\nconst store = createStore(reducer, {}, applyMiddleware(flashMiddleware(flashOptions))))\n```\nThe `options` object passed to the middleware may contain the following attributes:\n\n- `timeout`: A timeout (ms) after which the message will be removed (default: `3000`).\n- `props`: Default props that will be merged with each message's props.\n\n### Selectors\n\n`redux-flash` exposes the following state selectors:\n\n- `getFlashMessages`: Retrieves all flash messages from the state.\n- `getSuccessMessages`: Retrieves all flash messages from the state where `isError: false`.\n- `getErrorMessages`: Retrieves all flash messages from the state where `isError: true`.\n- `getLatestMessage`: Retrieves the last flash message that was added to the state.\n\nMessage objects returned by these selectors will have the following format:\n```javascript\n{\n   id: 1495649041702, // A unique ID\n   message: 'This is a test message!', // The message text\n   isError: false, // Whether the message is an error\n   props: {} // Any additional values you passed in your action creator\n}\n```\n\nA [PropType](https://github.com/facebook/prop-types) for this object is exported from this module as `flashMessageType`.\n\n### Reducer\n\n`redux-flash` exposes a reducer to handle the actions it creates. This reducer must be attached to your root reducer using the key `flash` in order for the library to function (see [example](#example)).\n\n## Displaying messages in the view\n\n`redux-flash` only handles the creation and storage of flash messages, and contains no display logic. Here's a simple example of how such logic could be implemented using `react-redux`:\n\n```javascript\n\nimport React from 'react'\nimport PropTypes from 'prop-types'\nimport { connect } from 'react-redux'\nimport { getLatestMessage, flashMessageType } from 'redux-flash'\n\nfunction FlashMessages ({ flash }) {\n    return (\n        \u003cdiv\u003e\n        {\n            flash \u0026\u0026 \u003cdiv\u003e{ flash.message }\u003c/div\u003e\n        }\n        \u003c/div\u003e\n    )\n}\n\nFlashMessages.propTypes = {\n    flash: flashMessageType\n}\n\nfunction mapStateToProps (state) {\n    return {\n        flash: getLatestMessage(state)\n    }\n}\n\nexport default connect(mapStateToProps)(FlashMessage)\n\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flaunchpadlab%2Fredux-flash","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flaunchpadlab%2Fredux-flash","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flaunchpadlab%2Fredux-flash/lists"}