{"id":16791839,"url":"https://github.com/posabsolute/redux-flash-notification","last_synced_at":"2025-03-22T01:30:31.689Z","repository":{"id":57237927,"uuid":"48045629","full_name":"posabsolute/redux-flash-notification","owner":"posabsolute","description":"An es6 growl notification plugin for redux","archived":false,"fork":false,"pushed_at":"2017-05-09T13:43:49.000Z","size":25,"stargazers_count":53,"open_issues_count":3,"forks_count":12,"subscribers_count":5,"default_branch":"master","last_synced_at":"2024-10-15T08:36:06.041Z","etag":null,"topics":["growler","javascript","notification-plugin","notifications","react","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/posabsolute.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":"2015-12-15T13:45:30.000Z","updated_at":"2024-09-23T10:35:45.000Z","dependencies_parsed_at":"2022-08-26T14:04:25.859Z","dependency_job_id":null,"html_url":"https://github.com/posabsolute/redux-flash-notification","commit_stats":null,"previous_names":["posabsolute/flash-notification-react-redux"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/posabsolute%2Fredux-flash-notification","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/posabsolute%2Fredux-flash-notification/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/posabsolute%2Fredux-flash-notification/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/posabsolute%2Fredux-flash-notification/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/posabsolute","download_url":"https://codeload.github.com/posabsolute/redux-flash-notification/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244893303,"owners_count":20527564,"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":["growler","javascript","notification-plugin","notifications","react","redux"],"created_at":"2024-10-13T08:35:58.853Z","updated_at":"2025-03-22T01:30:31.452Z","avatar_url":"https://github.com/posabsolute.png","language":"JavaScript","funding_links":[],"categories":["Marks"],"sub_categories":["[React - A JavaScript library for building user interfaces](http://facebook.github.io/react)"],"readme":"# Redux Flash Notification Component for Redux\nAn es6 growl-like notification plugin for react and redux.\n\nDemo: [Live Example](http://posabsolute.github.io/redux-flash-notification-example/) | [Source](https://github.com/posabsolute/redux-flash-notification-example)\n\nBetter Documentation: [http://posabsolute.github.io/redux-flash-notification](http://posabsolute.github.io/redux-flash-notification)\n\n## Integration\n\n\n1 npm install 'flash-notification-react-redux' --save\n\n2 Add redux-thunk middleware\n```\nnpm install 'redux-thunk' --save\n```\n\n```javascript\n import reduxThunk from 'redux-thunk'\n\n const createStoreWithMiddleware = applyMiddleware(reduxThunk)(createStore);\n const store = createStoreWithMiddleware()\n```\n\n3 Add the reducer to your root reducer\n\n```javascript\n\nimport { GrowlerReducer } from 'flash-notification-react-redux';\n\nconst rootReducer = combineReducers({\n  growler: GrowlerReducer,\n});\n\nexport default rootReducer;\n```\n\n4 Add the growler component to your app root component so it is always accessible\n```javascript\nimport { GrowlerContainer } from 'flash-notification-react-redux';\n\nexport class App extends Component {\n  static propTypes = {\n    children: React.PropTypes.any,\n  }\n  render() {\n    return (\n      \u003csection\u003e\n        \u003cGrowlerContainer /\u003e\n        {this.props.children}\n      \u003c/section\u003e\n    );\n  }\n}\n```\n\n5 Add webpack loaders to load es6 files.\n```javascript\n  module: {\n    loaders: [{\n      test:[/\\.jsx$/,  /\\.js$/],\n      loader: 'babel',\n      query: {\n        plugins: ['transform-decorators-legacy']\n      },\n      include: [\n        path.resolve(__dirname, \"src\"),\n        path.resolve(__dirname, \"node_modules/flash-notification-react-redux\")\n      ],\n    }, {\n      test: [/\\.scss$/, /\\.css$/],\n      loader: 'css?localIdentName=[path]!postcss-loader!sass',\n    }],\n  },\n};\n```\n\n6 You're done.\n\n\n## Usage\n\n### With the reducer\n\nYou can change the store state to show the growler.\n\nExample:\n\n```javascript\ndispatch({\n  type: 'GROWLER__SHOW',\n  growler: {\n    text: 'Please enter your JIRA url',\n    type: 'growler--error',\n  },\n});\n```\n\n```javascript\ndispatch({\n  type: 'GROWLER__SHOW',\n  growler: {\n    text: 'You have succesfully logged in',\n    type: 'growler--success',\n  },\n});\n```\n\n### With the actions\n\nIf made available in your components, you can use multiple actions to show the growler component,\n\nExample:\n```javascript\nimport React from 'react';\nimport { bindActionCreators } from 'redux';\nimport { connect } from 'react-redux';\nimport {GrowlerActions} from 'actions/sprints.action';\n\nconst mapStateToProps = state =\u003e ({});\nconst mapDispatchToProps = dispatch =\u003e {\n  return {\n    ...bindActionCreators(growlerActions, dispatch),\n  };\n};\n\n@connect(mapStateToProps, mapDispatchToProps)\nexport default class SprintsListContainer extends React.Component {\n  render() {\n    return \u003cSprintsListComponent {...this.props} /\u003e;\n  }\n}\n```\n### Available Actions\n\n### showGrowlerSuccess(text)\n\n### showGrowlerError(text)\n\n### showGrowler(text, type)\n\nUsed when you want to show custom messages. The type will be added as a CSS class.\n\n\n## Options\n\nOptions are passed down when you add the component to your app root.\n\n| Option | Default Value          | Default Value          | Description          |\n| ------------- | ----------- | ----------- | ----------- |\n| shownFor      | 3000| Milliseconds | Time the growler is shown |\n| messages     | -     | Object | Localization in every supported languages of your messages |\n| currentLocale     | enUS     | String |  Locale used to retrieve messages |\n\n```javascript\nimport { GrowlerContainer } from 'flash-notification-react-redux';\nimport growlerMessages from 'locales/growler.locale.js';\n\nexport class App extends Component {\n  render() {\n    return (\n      \u003csection\u003e\n        \u003cGrowlerContainer messages={growlerMessages} currentLocale='enUS' shownFor=\"9000\" /\u003e\n        {this.props.children}\n      \u003c/section\u003e\n    );\n  }\n}\n```\n\n### Messages\n\nBy default the growler will show the text passed down by the action, however when mounting the component you can specify localized text. When shown, the component will verify if the text passed match a key.\n\n```javascript\nimport { GrowlerContainer } from 'flash-notification-react-redux';\nimport growlerMessages from 'locales/growler.locale.js';\n\n// usage in render\n\u003cGrowlerContainer messages={growlerMessages} currentLocale='enUS' /\u003e\n```\n#### currentLocale (default: enUS)\nYou can specify the language used by using the currentLocale option.\n\n\n#### Messages object Example\n```javascript\n{\n  enUS: {\n    error: 'There was en error'\n  },\n  frCA: \n     error: 'Il y a eu une erreur'\n}\n```\n\n### shownFor (default: 3000)\nTime the growler is shown in milliseconds\n\n```javascript\n\u003cGrowlerContainer shownFor=\"6000\" /\u003e\n```\n\n## Limitations\n\nThis component is based on the use of redux, react, es6 \u0026 es7 (decorators) and webpack for loading the css as an import module.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fposabsolute%2Fredux-flash-notification","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fposabsolute%2Fredux-flash-notification","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fposabsolute%2Fredux-flash-notification/lists"}