{"id":26806330,"url":"https://github.com/activ8-developers/react-redux-flash-message","last_synced_at":"2025-04-23T12:05:40.276Z","repository":{"id":57360771,"uuid":"245857648","full_name":"ACTIV8-Developers/react-redux-flash-message","owner":"ACTIV8-Developers","description":"UI agnostic library that makes easy to create flash messages and to store them in a Redux store.","archived":false,"fork":false,"pushed_at":"2020-12-11T11:13:50.000Z","size":2,"stargazers_count":2,"open_issues_count":0,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-18T13:53:18.066Z","etag":null,"topics":["flash-messages","javascript","react-redux","redux"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ACTIV8-Developers.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-03-08T17:27:48.000Z","updated_at":"2021-03-01T22:41:35.000Z","dependencies_parsed_at":"2022-09-06T22:22:24.770Z","dependency_job_id":null,"html_url":"https://github.com/ACTIV8-Developers/react-redux-flash-message","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ACTIV8-Developers%2Freact-redux-flash-message","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ACTIV8-Developers%2Freact-redux-flash-message/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ACTIV8-Developers%2Freact-redux-flash-message/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ACTIV8-Developers%2Freact-redux-flash-message/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ACTIV8-Developers","download_url":"https://codeload.github.com/ACTIV8-Developers/react-redux-flash-message/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246258884,"owners_count":20748573,"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","javascript","react-redux","redux"],"created_at":"2025-03-29T23:31:05.886Z","updated_at":"2025-03-29T23:31:06.406Z","avatar_url":"https://github.com/ACTIV8-Developers.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# About\n\nThis is UI agnostic library that makes easy to create flash messages and to store them in a Redux store. This library does not render the FlashMessages for you it only stores them!\n\n# Installation\n\n`npm install simple-redux-flash-message --save`\n\n# Getting started.\nFirst add the following dependencies in the package.json (if present skip this step):\n\n- \"react-redux\": \"^6.0.1\"\n- \"redux\": \"^4.0.4\"\n\nNow add the flash-message-reducer to your rootReducer, for example:\n\n```javascript\nimport { combineReducers } from 'redux';\nimport { flashMessageReducer } from 'simple-redux-flash-message';\n\nconst rootReducer = combineReducers({\n    flashMessage: flashMessageReducer\n});\n\nexport default rootReducer;\n```\n\n# Sending flash messages\n\nNow that we can see the flash messages we can use the following convenience methods to send flash messages:\n\n```javascript\nimport { publishFlashMessage } from 'simple-redux-flash-message';\n\nconst {dispatch} = this.props;\n\n// Redux dispatch method\n// Message text\n// Number of miliseconds messages will be displayed\n// On click callback\n// Custom data passed to message\npublishFlashMessage(dispatch, \"This is message content\", 5000, () =\u003e console.log(\"Message clicked!\"), {\"message-type\": \"warning\"})\n\n```\n\n# Rendering flash messages\n\nPut following component somewhere in app root and pass messages prop from redux store.\n\n```javascript\nimport React, { Component } from 'react';\n\nexport class FlashMessage extends Component {\n\n    renderMessage(message) {\n        return (\n            \u003cdiv\n                key={message.id}\n                className={`flash-message`}\n                onClick={() =\u003e message.onClick()}\n            \u003e\n                \u003cbutton type=\"button\" onClick={message.onDismiss}\u003e\n                    Close\n                \u003c/button\u003e\n                \u003cdiv onClick={() =\u003e message.onClick()}\u003e\n                    \u003cp\u003e{message.text}\u003c/p\u003e\n                \u003c/div\u003e\n            \u003c/div\u003e\n        );\n    }\n\n    render() {\n        const { messages } = this.props;\n\n        return (\n            \u003cdiv\u003e\n                {messages.map((message) =\u003e this.renderMessage(message))}\n            \u003c/div\u003e\n        );\n    }\n}\n\nexport default FlashMessage;\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Factiv8-developers%2Freact-redux-flash-message","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Factiv8-developers%2Freact-redux-flash-message","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Factiv8-developers%2Freact-redux-flash-message/lists"}