{"id":13436346,"url":"https://github.com/juliancwirko/react-s-alert","last_synced_at":"2025-03-18T21:30:20.736Z","repository":{"id":57343972,"uuid":"48816465","full_name":"juliancwirko/react-s-alert","owner":"juliancwirko","description":"Alerts / Notifications for React with rich configuration options","archived":true,"fork":false,"pushed_at":"2019-10-01T20:05:03.000Z","size":126,"stargazers_count":649,"open_issues_count":31,"forks_count":69,"subscribers_count":13,"default_branch":"master","last_synced_at":"2024-10-27T20:19:12.024Z","etag":null,"topics":["javascript","react","react-component","reactjs","ui-components"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/react-s-alert","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/juliancwirko.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-30T19:35:11.000Z","updated_at":"2024-07-02T07:28:38.000Z","dependencies_parsed_at":"2022-09-12T06:30:29.377Z","dependency_job_id":null,"html_url":"https://github.com/juliancwirko/react-s-alert","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/juliancwirko%2Freact-s-alert","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/juliancwirko%2Freact-s-alert/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/juliancwirko%2Freact-s-alert/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/juliancwirko%2Freact-s-alert/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/juliancwirko","download_url":"https://codeload.github.com/juliancwirko/react-s-alert/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244310244,"owners_count":20432501,"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":["javascript","react","react-component","reactjs","ui-components"],"created_at":"2024-07-31T03:00:46.990Z","updated_at":"2025-03-18T21:30:20.316Z","avatar_url":"https://github.com/juliancwirko.png","language":"JavaScript","funding_links":[],"categories":["Uncategorized","UI Components","Demos"],"sub_categories":["Uncategorized","Notification"],"readme":"**This lib is no longer maintained. It needs major adjustments and rewrites. I hope I'll find some time for it in the future. Sorry.**\n\n\n# React sAlert component\n\nsAlert is a React component which provides alerts or notifications with rich configuration possibilities.\nThis is a rewritten version of Meteor/Blaze sAlert package which you can find here: [s-alert.meteor.com](http://s-alert.meteor.com).\n\n## Demo\n\nThe demo website and provided source code are the best learning resources.\n\n- [live demo app](http://react-s-alert.jsdemo.be/)\n- [demo app source code](https://github.com/juliancwirko/react-s-alert-demo)\n\n## Usage with React\n\nHere is what you need to do to make it work.\n**Of course you need to have React and ReactDOM installed in your project.**\n\n### 1. Install the package\n\n```\nnpm install react-s-alert --save\n```\n\n### 2. Import component\n\nWith ES2015:\n```\nimport Alert from 'react-s-alert';\n```\n\nWith ES5:\n```\nvar Alert = require('react-s-alert').default;\n```\n\n### 3. Import (or copy) CSS files\n\nAll you need to do is to import (or copy) a default CSS file and some or all CSS files with effects which you want to use. A default CSS file is mandatory. With Webpack you could do something like:\n\nWith ES2015:\n```javascript\n// mandatory\nimport 'react-s-alert/dist/s-alert-default.css';\n\n// optional - you can choose the effect you want\nimport 'react-s-alert/dist/s-alert-css-effects/slide.css';\nimport 'react-s-alert/dist/s-alert-css-effects/scale.css';\nimport 'react-s-alert/dist/s-alert-css-effects/bouncyflip.css';\nimport 'react-s-alert/dist/s-alert-css-effects/flip.css';\nimport 'react-s-alert/dist/s-alert-css-effects/genie.css';\nimport 'react-s-alert/dist/s-alert-css-effects/jelly.css';\nimport 'react-s-alert/dist/s-alert-css-effects/stackslide.css';\n```\n\nWith ES5:\n```javascript\n// mandatory\nrequire('react-s-alert/dist/s-alert-default.css');\n\n// optional - you can choose the effect you want\nrequire('react-s-alert/dist/s-alert-css-effects/slide.css');\nrequire('react-s-alert/dist/s-alert-css-effects/scale.css');\nrequire('react-s-alert/dist/s-alert-css-effects/bouncyflip.css');\nrequire('react-s-alert/dist/s-alert-css-effects/flip.css');\nrequire('react-s-alert/dist/s-alert-css-effects/genie.css');\nrequire('react-s-alert/dist/s-alert-css-effects/jelly.css');\nrequire('react-s-alert/dist/s-alert-css-effects/stackslide.css');\n```\n\nCDN:\n- https://cdn.jsdelivr.net/npm/react-s-alert@1.4.1/dist/s-alert-default.css\n- https://cdn.jsdelivr.net/npm/react-s-alert@1.4.1/dist/s-alert-css-effects/bouncyflip.css\n- https://cdn.jsdelivr.net/npm/react-s-alert@1.4.1/dist/s-alert-css-effects/flip.css\n- https://cdn.jsdelivr.net/npm/react-s-alert@1.4.1/dist/s-alert-css-effects/genie.css\n- https://cdn.jsdelivr.net/npm/react-s-alert@1.4.1/dist/s-alert-css-effects/jelly.css\n- https://cdn.jsdelivr.net/npm/react-s-alert@1.4.1/dist/s-alert-css-effects/scale.css\n- https://cdn.jsdelivr.net/npm/react-s-alert@1.4.1/dist/s-alert-css-effects/slide.css\n- https://cdn.jsdelivr.net/npm/react-s-alert@1.4.1/dist/s-alert-css-effects/stackslide.css\n\n(you can change versions in URL if needed)\n\n\nYou can also copy the files and include it another way in your app. It depends on your workflow.\n\n**If you are using CSS Modules for now you need to import these files globally.** (You can check the demo website Webpack config file).\n\n### 4. Place sAlert component in your main app component\n\nYou need to place the main sAlert container. The best place for it is at the end of your main app component. For Example:\n\n```javascript\nimport React from 'react';\nimport {Router} from 'react-router';\nimport Alert from 'react-s-alert';\n\nimport 'react-s-alert/dist/s-alert-default.css';\nimport 'react-s-alert/dist/s-alert-css-effects/slide.css';\n\nclass Main extends React.Component {\n    constructor(props) {\n        super(props);\n    }\n    render() {\n        return (\n            \u003cdiv\u003e\n                \u003cspan\u003e\n                    {this.props.children}\n                \u003c/span\u003e\n                \u003cAlert stack={{limit: 3}} /\u003e\n            \u003c/div\u003e\n        )\n    }\n}\n\nexport default Main;\n```\n\n### 5. Make calls to activate alerts\n\nYou can activate your alerts in many different places in the app. You need to call proper methods. For Example:\n\nMethods which you can use:\n\n- **Alert.warning(message, configObj)**\n- **Alert.error(message, configObj)**\n- **Alert.info(message, configObj)**\n- **Alert.success(message, configObj)**\n- **Alert.close(alertId)**\n- **Alert.closeAll()**\n\nsAlert methods will return the already created alertId.\n\nExample usage:\n```javascript\nimport React from 'react';\nimport Alert from 'react-s-alert';\n\nclass Home extends React.Component {\n    handleClick1(e) {\n        e.preventDefault();\n        Alert.warning('\u003ch1\u003eTest message 1\u003c/h1\u003e', {\n            position: 'top-right',\n            effect: 'scale',\n            onShow: function () {\n                console.log('aye!')\n            },\n            beep: false,\n            timeout: 'none',\n            offset: 100\n        });\n    }\n    handleClick2(e) {\n        e.preventDefault();\n        Alert.info('Test message 2', {\n            position: 'bottom-left',\n            effect: 'bouncyflip',\n            timeout: 'none'\n        });\n    }\n    handleClick3(e) {\n        e.preventDefault();\n        Alert.error('Test message 3', {\n            position: 'bottom-right',\n            effect: 'slide',\n            timeout: 'none'\n        });\n    }\n    handleCloseAll(e) {\n        e.preventDefault();\n        Alert.closeAll();\n    }\n    render() {\n        return (\n            \u003cdiv\u003e\n                \u003cdiv\u003e\n                    \u003ca href=\"#\" onClick={this.handleClick1}\u003eClick 1\u003c/a\u003e |\n                    \u003ca href=\"#\" onClick={this.handleClick2}\u003eClick 2\u003c/a\u003e |\n                    \u003ca href=\"#\" onClick={this.handleClick3}\u003eClick 3\u003c/a\u003e |\n                    \u003ca href=\"#\" onClick={this.handleCloseAll}\u003eClose All\u003c/a\u003e\n                \u003c/div\u003e\n            \u003c/div\u003e\n        )\n    }\n}\n\nexport default Home;\n```\n\nYou always need to provide a `message`. For example\n\n```javascript\nAlert.error('Test message 3');\n```\n\nYou can also provide a react component:\n\n```javascript\nAlert.error(\u003cMyComponent props1={props1} props2={props2}/\u003e);\n```\n\nYou don't need to provide the configuration object here, just remember to provide it globally.\n\n## Configuration details\n\nWith sAlert you can place your configuration as a global config in the main sAlert container, for example:\n\n```javascript\n\u003cAlert stack={{limit: 3}} html={true} /\u003e\n```\n\nYou can also overwrite these global settings in the particular method call. For example, here we will overwrite the global settings for 'html' in our error alert call:\n\n```javascript\nAlert.error('Error message...', {\n    position: 'bottom-right',\n    effect: 'slide',\n    html: false\n});\n```\n\n### All possible configuration options:\n\n#### First - only global configuration options\nYou can set it up only in the main sAlert component props\n\n##### 1. `stack`\nYou can stack your alerts or just display them in the same place.\n\nPossible stack values:\n\n- **true** or **false**\n- object with:\n    - **limit** (you can limit your alerts displayed on screen)\n    - **spacing** (you can change the space around your alerts)\n\nExamples:\n```javascript\n\u003cAlert stack={{limit: 3, spacing: 50}} /\u003e\n```\nor\n```javascript\n\u003cAlert stack={true} /\u003e\n```\n\n##### 2. `contentTemplate`\nYou can prepare your own content template even with additional fields (More details can be found later on in this README.)\n\nExamples:\n\n```javascript\n\u003cAlert contentTemplate={MyContentTemplate} /\u003e\n```\n\nHere you can also use all configuration options listed below.\n\n#### Configuration options with a single sAlert method call\n\n##### 1. `effect`\nYou can provide the name of the animations effect, you also need to import proper CSS file.\n\nExample:\n\nIn method call:\n```javascript\nAlert.success('Message...', {\n    effect: 'genie'\n});\n```\n\nIn global config:\n```javascript\n\u003cAlert effect='genie' /\u003e\n```\n\nPossible effects names:\n\n- **slide**\n- **scale**\n- **bouncyflip**\n- **flip**\n- **genie**\n- **jelly**\n- **stackslide**\n\nRemember that you need to import the CSS files for the effects. See above.\n\n##### 2. `position`\nWhere the alert should appear.\n\nExample:\n\nIn method call:\n```javascript\nAlert.success('Message...', {\n    position: 'top-right'\n});\n```\n\nIn global config:\n```javascript\n\u003cAlert position='top-right' /\u003e\n```\n\nPossible positions:\n\n- **top** (full width)\n- **bottom** (full width)\n- **top-right**\n- **top-left**\n- **bottom-right**\n- **bottom-left**\n\n\n##### 3. `timeout`\n\nYou can set up the timeout in ms.\n\nExample:\n\nIn method call:\n```javascript\nAlert.success('Message...', {\n    timeout: 5000\n});\n```\n\nIn global config:\n```javascript\n\u003cAlert timeout={5000} /\u003e\n```\n\nPossible timeout values:\n\n- **(Number - ms)**\n- **'none'**\n\n##### 4. `html`\n\nYou can configure if your alert should display HTML formated messages.\n\nExample:\n\nIn method call:\n```javascript\nAlert.success('\u003ch1\u003eMessage...\u003c/h1\u003e', {\n    html: true\n});\n```\n\nIn global config:\n```javascript\n\u003cAlert html={true} /\u003e\n```\n\nPossible 'html' values:\n\n- **true**\n- **false**\n\n##### 5. `offset`\n\nIn px. Will be added to first alert (bottom or top - depends on the position in config).\n\nExample:\n\nIn method call:\n```javascript\nAlert.success('Message...', {\n    offset: 150\n});\n```\n\nIn global config:\n```javascript\n\u003cAlert offset={150} /\u003e\n```\n\nPossible offset values:\n\n- **(Number - px)**\n\n##### 6. `beep`\n\nYou can set up your audio 'beeps'. Just configure your audio file path. (.mp3 files should work in every browser.) You can also configure 4 paths for 4 conditions.\n\n**There is no default audio sample in the package.**\nYou should use sound samples which you know that you have the right to use it.\n\nExample:\n\nIn method call:\n```javascript\nAlert.success('Message...', {\n    beep: '/path-to-audio/file.mp3'\n});\n```\n\nIn global config:\n```javascript\n\u003cAlert beep={{\n    info: '/path-to-audio/file-info.mp3',\n    error: '/path-to-audio/file-error.mp3',\n    warning: '/path-to-audio/file-warning.mp3',\n    success: '/path-to-audio/file-success.mp3'}} /\u003e\n```\nor just one for all:\n\n```javascript\n\u003cAlert beep='/path-to-audio/file.mp3' /\u003e\n```\n\nPossible 'beep' values:\n\n- **(String - audio file path)** (one audio file for all alerts)\n- **(Object)**\n    - {info: '/path/file.mp3', error: '/path/file.mp3', warning: '/path/file.mp3', success: '/path/file.mp3'}\n\n##### 7. `preserveContext`\nMakes sure that your Alert always has the parent's context.\nIt is needed because the Alert's height, which is needed for calculating the position of each element in the stack, is measured by directly mounting an Alert into DOM by using `ReactDOM.render`. If you want to include any custom JSX inside your Alert, e.g. for  `Material UI`, which uses context for passing theme configuration, you will need this option to be set to **true**.\n\nThis options enables the usage of the new `ReactDOM.unstable_renderSubtreeIntoContainer` function, which works exactly the same as `ReactDOM.render`, but keeps the context from the parent's component. Even though this option is named as \"unstable\", it works perfectly fine.\n\nPossible preserveContext values:\n\n- **true** or **false** (Defaults to **false**)\n\nExample:\n\nIn method call:\n```javascript\nAlert.success('Message...', {\n    preserveContext: true\n});\n```\n\nIn global config:\n```javascript\n\u003cAlert preserveContext /\u003e\n```\n\n##### 8. `onShow`\n\nExecute a callback function. onShow will fire the function when the alert appears.\n\nExample:\n\nIn method call:\n```javascript\nAlert.success('Message...', {\n    onShow: function () {\n        console.log('onShow Fired!');\n    }\n});\n```\n\nIn global config:\n```javascript\n\u003cAlert onShow={this.handleOnShow} /\u003e\n```\n\nPossible 'onShow' values:\n\n- **(Function)**\n\n##### 9. `onClose`\n\nExecute a callback function.  Will fire the function when the alert is closed.\n\nExample:\n\nIn method call:\n```javascript\nAlert.success('Message...', {\n    onClose: function () {\n        console.log('onClose Fired!');\n    }\n});\n```\n\nIn global config:\n```javascript\n\u003cAlert onClose={this.handleOnClose} /\u003e\n```\n\nPossible 'onClose' values:\n\n- **(Function)**\n\n##### 10. `customFields`\n\nYou can pass a customFields object for your custom content template component. You need to prepare the component to be able to display customFields values. You'll read more about it below.\n\nExample:\n\nIn global config you need to provide custom content template component:\n```javascript\n\u003cAlert contentTemplate={MyContentTemplate} /\u003e\n```\n\nIn method call you can provide custom fields used in your custom template:\n```javascript\nAlert.success('Message...', {\n    customFields: {\n        specialInfo: this.getSpecialInfo();\n    }\n});\n```\n\nPossible 'customFields' values:\n\n- **(Object)**\n\n## Overwrite content template component\n\nWith sAlert you have the possibility to overwrite the `SAlertContentTmpl` core component. This is useful when you want to provide more dynamic data in your alerts or just when you want to rebuild the HTML structure of the alert. This is very useful, but might not be trivial. Standard sAlerts will take only the message you want to display and some configuration. There will be use cases when you want to display some more dynamic data or just some more HTML structures.\n\n I'll try to explain it by example:\n\nLet's say that we want to have an alert with the additional dynamic data. We want the name of the customer, and a confirmation button which will close the alert.\n\nHere is what we could do.\n\nIn our main app component we will use sAlert component (see above) with a custom content component:\n\n```javascript\nimport MyCustomContentTemplate from './MyCustomContentTemplate';\n(...)\n\u003cAlert contentTemplate={MyCustomContentTemplate} /\u003e\n(...)\n```\n\nWe have just told our sAlert component that we will use a custom content component instead the core one which is called `SAlertContentTmpl`. (You should copy the content of the `SAlertContentTmpl` in your custom one and add your own modifications to it).\n\nFor example our `MyCustomContentTemplate` component could look like:\n\n```javascript\nimport React from 'react';\nimport Alert from 'react-s-alert';\n\nclass MyCustomContentTemplate extends React.Component {\n    constructor(props) {\n        super(props);\n    }\n    handleConfirm() {\n        console.log('Customer confirmation!');\n        Alert.close(this.props.id);\n    }\n    render() {\n        return (\n            \u003cdiv className={this.props.classNames} id={this.props.id} style={this.props.styles}\u003e\n                \u003cdiv className='s-alert-box-inner'\u003e\n                    {this.props.message}\n\n                    {/* use this api to customize alert style */}\n                    {this.props.condition}\n                \u003c/div\u003e\n                \u003ch3\u003e{this.props.customFields.customerName}\u003c/h3\u003e\n                \u003cbutton onClick={this.handleConfirm.bind(this)}\u003eConfirm\u003c/button\u003e\n                \u003cspan className='s-alert-close' onClick={this.props.handleClose}\u003e\u003c/span\u003e\n            \u003c/div\u003e\n        )\n    }\n}\n\nexport default MyCustomContentTemplate;\n```\n\nThen you just need to pass the `customerName` value somewhere in your app. For example:\n\n```\nAlert.warning('Customer confirmation needed.', {\n    customFields: {\n        customerName: 'Stefan Kowalski'\n    }\n});\n```\n\nAs you can see you should keep the other props here. These are the props which are needed to provide proper behaviour of your alerts. You need to be careful with custom content components.\n\n## Testing and Development\n\nClone and install it first:\n\n```\ngit clone https://github.com/juliancwirko/react-s-alert.git\ncd react-s-alert\nnpm install\n```\n\nIf you want to test (Node.js 4.0 or newer):\n\n```\nnpm test\n```\nor\n```\nnpm run testonly\n```\n\nIf you want to transpile from ES2015 to ES5:\n\n```\nnpm run prepublish\n```\n\n## Also check out\n\n- [Meteor/React/GraphQL apps development](http://www.psd2meteor.com/)\n- [Open Source Live Chat App built with Meteor](https://www.simplechat.support/)\n- [Stylus Flexbox Grid](http://stylusgrid.com/)\n- [React project boilerplate with Webpack, HMR, React Router](https://github.com/juliancwirko/react-boilerplate)\n- [Boilerplate for creating React Npm packages with ES2015](https://github.com/juliancwirko/react-npm-boilerplate)\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjuliancwirko%2Freact-s-alert","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjuliancwirko%2Freact-s-alert","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjuliancwirko%2Freact-s-alert/lists"}