{"id":26462098,"url":"https://github.com/sbardian/react-alerts-plus","last_synced_at":"2025-03-19T05:44:59.365Z","repository":{"id":38425577,"uuid":"160582776","full_name":"sbardian/react-alerts-plus","owner":"sbardian","description":"Alerts for react","archived":false,"fork":false,"pushed_at":"2024-10-18T23:15:16.000Z","size":6575,"stargazers_count":7,"open_issues_count":60,"forks_count":2,"subscribers_count":2,"default_branch":"develop","last_synced_at":"2024-10-20T06:03:57.264Z","etag":null,"topics":["alert","alert-components","alerts","plus","react","reactjs"],"latest_commit_sha":null,"homepage":null,"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/sbardian.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-12-05T21:46:48.000Z","updated_at":"2023-09-24T18:07:31.000Z","dependencies_parsed_at":"2023-10-23T10:33:32.274Z","dependency_job_id":"c4a8debb-8b54-4dd0-bd60-38786cafafb5","html_url":"https://github.com/sbardian/react-alerts-plus","commit_stats":{"total_commits":1282,"total_committers":6,"mean_commits":"213.66666666666666","dds":"0.23478939157566303","last_synced_commit":"295b53471733cde6d6618d177dcddb4d64c221bf"},"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sbardian%2Freact-alerts-plus","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sbardian%2Freact-alerts-plus/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sbardian%2Freact-alerts-plus/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sbardian%2Freact-alerts-plus/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sbardian","download_url":"https://codeload.github.com/sbardian/react-alerts-plus/tar.gz/refs/heads/develop","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244365024,"owners_count":20441470,"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":["alert","alert-components","alerts","plus","react","reactjs"],"created_at":"2025-03-19T05:44:58.861Z","updated_at":"2025-03-19T05:44:59.355Z","avatar_url":"https://github.com/sbardian.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![WIP](https://img.shields.io/badge/WIP-Be%20ready%20for%20changes-yellow.svg?style=for-the-badge)\n\n![](https://img.shields.io/circleci/project/github/sbardian/react-alerts-plus/develop.svg?style=for-the-badge)\n![](https://img.shields.io/coveralls/github/sbardian/react-alerts-plus/develop.svg?style=for-the-badge)\n\n# react-alerts-plus\n\n[Demo](https://codesandbox.io/s/4q2213m2kx)\n\nShows an alert in the position and for the duration specified. You will most\nlikely want to pass your own custom alert component to use with the library, see\nbelow.\n\nThis library was influenced by\n[schiehlls](https://github.com/schiehll/ 'schiehll')\n[react-alert](https://github.com/schiehll/react-alert 'react-alert') library. I\nliked what he had done but the project seems to no longer be supported, and I\nwanted something just a little different. Feel free to check out his library,\nmaybe it will work better for your needs. Otherwise keep reading...\n\n### Installation:\n\n```\nyarn add react-alerts-plus\n```\n\nor\n\n```\nnpm install react-alerts-plus\n```\n\n### Usage: Wrap your app in the provider:\n\n```jsx\nimport { AlertProvider } from 'react-alerts-plus';\n\nclass MyApp extends React.Component {\n  render() {\n    return (\n      \u003cAlertProvider\u003e\n        \u003cApp /\u003e\n      \u003c/AlertProvider\u003e\n    );\n  }\n}\n```\n\n### In your app where you would like to show alerts\n\n```jsx\nimport { AlertWrapper } from 'react-alerts-plus';\n...\n...\nrender() {\n  const options = {\n        message: 'My alert message',\n        style: {\n          backgroundColor: 'cornflowerblue',\n          borderRadius: 0,\n        },\n        offset: '50px',\n        position: 'top right',\n        duration: 0,\n      }\n  }\n\n  return (\n    \u003cdiv\u003e\n      \u003cbutton\u003e\n        \u003cAlertWrapper\u003e\n          {({show, close}) =\u003e {\n            \u003cbutton type=\"button\" onClick={() =\u003e const alertId = show(options)}\u003eShow Alert\u003c/button\u003e\n          }}\n          \u003cbutton type=\"button\" onClick={() =\u003e close(alertId)}\u003e\n        \u003c/AlertWrapper\u003e\n    \u003c/div\u003e\n  )\n}\n```\n\nThe AlertWrapper returns a **show** and **close** function.\n\nshow(options, AlertComponent): The show function will display the alert using\nthe options object passed. **Returns the ID of the alert.**\n\nclose(alertId): The close function will close the alert with the corresponding\nID.\n\n### Alert Options:\n\nAll three methods of using react-alerts-plus accept the same options, though\nsome maybe ignored with different alerts.\n\nOptions are passed as an object, as the first argument to the show function.\nWhile z-index is not an option, you can pass a custom z-index in your styles and\nit will be applied. See below.\n\n| Option           | Type            | Description                                    |\n| ---------------- | --------------- | ---------------------------------------------- |\n| message          | String / Number | message displayed in the alert                 |\n| id               | String / Number | id for the alert                               |\n| style            | Object          | defining javascript styles                     |\n| offset           | String          | defining the offset of the alert from position |\n| duration         | Number          | time in milliseconds for the alert to be shown |\n| position         | String          | placement of the alert                         |\n| theme            | String          | default alert theme colors                     |\n| showProgessBar   | Bool            | show auto close progress bar                   |\n| progressBarColor | String          | progress bar color                             |\n| AlertComponent   | PureComponent   | pure components recommended                    |\n\n### Option Examples:\n\n```\n  message:          'Hi alert here!'\n  id:               'my-alert'\n  style:            style: {\n                      backgroundColor: 'cornflowerblue',\n                      borderRadius: 0,\n                    }\n  offset:           '50px'\n  duration:         2000 (use 0 to never auto close the alert)\n  position:         'top left'\n                    'top center'\n                    'top right'\n                    'bottom left'\n                    'bottom center'\n                    'bottom right'\n  theme:            'light' or 'dark' (light is default)\n  showProgressBar   false\n  progressBarColor '#666', 'cornflowerblue', 'red'\n  AlertComponent:   Default alert will be totally replaced by your custom alert.\n                    Only offset, duration, id, showProgressBar, progressBarColor,\n                    and position are used when passing a custom AlertComponent.\n                    See below for specifics about using\n                    your own custom alert component. **While custom alert\n                    components can be functional stateless components, Components,\n                    we recommend using PureComponents.**\n\n  const optionsExample = {\n        message: 'Hi alert here!',\n        id: 'my-alert',\n        style: {\n          backgroundColor: 'cornflowerblue',\n          borderRadius: 0,\n          zIndex: 1000,\n        },\n        offset: '50px',\n        duration: 2000,\n        position: 'top right',\n        theme: 'dark',\n        progressBarColor: 'cornflowerblue',\n      }\n```\n\n### react-alerts-plus provides three different types of alerts.\n\n- Default alerts\n- Base alert components\n- Custom alerts\n\n## Default Alerts\n\nDefault alerts are nothing fancy, just basic alerts that display using the\noptions you pass to the **show** function. (See AlertWrapper example above).\n\n## Base Alert Components\n\nTo use the base alert components you still need to wrap your App in our\n**AlertProvider** and **AlertWrapper**, but you pass our CardAlert component as\nthe second AlertComponent arguement to show. CardAlert will return any of the\nbase alert components you wish to use.\n\n- AlertContainer\n- AlertHeader\n- AlertBody\n- AlertImage\n- AlertProgressBar\n\nAs long as you pass props to this function you can make use of react-alerts-plus\ntransitions (transitionStyle) and close function (see below).\n\n### AlertContainer\n\nA container to wrap your other alert components.\n\nSpecial props:\n\n- N/A.\n\n* All your props are spread across this component for you to style your alert.\n\n### AlertHeader\n\nAlert header.\n\nSpecial props:\n\n- title: String. Alert title string\n\n* All your props are spread across this component for you to style your alert.\n\n### AlertBody\n\nThe body of your alert.\n\nSpecial props:\n\n- message: String. Alert message string\n\n* All your props are spread across this component for you to style your alert.\n\n### AlertImage\n\nDisplays an image for your Alert.\n\nSpecial props:\n\n- height: String. Height of image (ex: '200px')\n- width: String. Width of image (ex: '200px')\n- imageSrc: String. URL to image\n- alt: String. alt attribute for image\n\n* All your props are spread across this component for you to style your alert.\n\n### AlertProgress\n\nA propress bar showing how long the alert will remain open before the duration\nruns out. Will not be shown if:\n\n- duration option is **0** (zero), never auto close\n- showProgresBar option is **false**\n\nSpecial props: These props can be pulled from the props passed into the\nCardAlert (the options you sent to show, see below) or passed manually.\n\n- progressBarColor,\n- alertTimeout,\n- showProgressBar,\n- state,\n\n```jsx\n/** @jsx jsx */\nimport React from 'react';\nimport { Icon } from 'react-icons-kit';\nimport { ic_close as closeIcon } from 'react-icons-kit/md/ic_close';\nimport { jsx, css } from '@emotion/core';\nimport { AlertProvider, AlertWrapper, CardAlert } from 'react-alerts-plus';\n...\n...\nrender() {\n  const options = {\n    message: 'My alert message',\n    position: 'top left',\n    offset: '20px',\n    id: 'my-bottom-center-alert',\n    duration: 2000,\n    progressBarColor: 'linear-gradient(to right, yellow, orange, red)',\n  }\n\n\n  return (\n    \u003cdiv\u003e\n      \u003cbutton\u003e\n        \u003cAlertWrapper\u003e\n          {({show, close}) =\u003e (\n            \u003cbutton\n              type=\"button\"\n              onClick={() =\u003e\n                show(options,\n                  props =\u003e (\n                    \u003cCardAlert\n                      render={({\n                        AlertContainer,\n                        AlertHeader,\n                        AlertBody,\n                        AlertImage,\n                        AlertProgressBar,\n                      }) =\u003e {\n                        const {\n                          transitionStyle,\n                          close: cardAlertClose,\n                        } = props;\n                        return (\n                          \u003cAlertContainer\n                            css={css`\n                              display: grid;\n                              grid-gap: 10px;\n                              grid-template-rows: 40px 1fr 10px;\n                              border: 1px solid lavenderblush;\n                              justify-content: center;\n                              padding: 20px;\n                              width: 400px;\n                              margin: 15px;\n                              background-color: cadetblue;\n                              box-shadow: 1px 1px 8px 1px #666;\n                            `}\n                            style={{ ...transitionStyle }}\n                          \u003e\n                            \u003cdiv\n                              css={css`\n                                display: grid;\n                                grid-gap: 20px;\n                                grid-template-columns: 1fr 20px;\n                              `}\n                            \u003e\n                              \u003cAlertHeader\n                                title=\"this is a title\"\n                                style={{ fontSize: '24pt' }}\n                              /\u003e\n                              \u003cIcon\n                                size={20}\n                                icon={closeIcon}\n                                onClick={cardAlertClose}\n                              /\u003e\n                            \u003c/div\u003e\n                            \u003cdiv\n                              css={css`\n                                display: grid;\n                                grid-gap: 15px;\n                                grid-template-columns: 200px 1fr;\n                              `}\n                            \u003e\n                              \u003cAlertImage\n                                height={200}\n                                width={200}\n                                imageSrc={imageUri}\n                                alt=\"My Alert Image\"\n                              /\u003e\n                              \u003cAlertBody message=\"this is a message to body\" /\u003e\n                            \u003c/div\u003e\n                            \u003cAlertProgressBar {...props} /\u003e\n                          \u003c/AlertContainer\u003e\n                        );\n                      }}\n                    /\u003e\n                  ),\n                )\n              }\n            \u003e\n              CardAlert Bottom Center\n            \u003c/button\u003e\n          )}\n        \u003c/AlertWrapper\u003e\n    \u003c/div\u003e\n  )\n}\n```\n\n### Custom Alert Component:\n\n**While custom alert components can be a functional stateless component,\nReac.Component, etc. we recommend using React.PureComponents.**\n\nPassing a custom alert component will cause some options to be ignored (see\nOption Examples above). The close function will be added as a prop for you to\nconsume in your custom alert component. **If you are going to use the close prop\nyou will need to supply the custom ID with your options.** You can also pass any\nother props you might need in your custom alert component. See the codesandbox\ndemo link at the top of this README.\n\n```jsx\n/* eslint-disable import/no-extraneous-dependencies */\n/** @jsx jsx */\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport { jsx, css } from '@emotion/core';\nimport { Icon } from 'react-icons-kit';\nimport { ic_close as closeIcon } from 'react-icons-kit/md/ic_close';\n\nclass MyAlert extends React.PureComponent {\n  render() {\n    const {\n      close,\n      title,\n      message,\n      imageUri,\n      transitionStyle,\n      showProgressBar,\n      progressBarColor,\n      alertTimeout,\n      state,\n    } = this.props;\n\n    // console.log('rest = ', props);\n    const progressStyle = {\n      transition: `width ${alertTimeout}ms ease-in-out`,\n      width: '0px',\n    };\n\n    const progressTransitionStyles = {\n      entering: { width: '0px' },\n      entered: { width: '100%' },\n    };\n    return (\n      \u003cdiv\n        key=\"someRandomKey\"\n        css={css`\n          display: grid;\n          grid-gap: 10px;\n          grid-template-rows: 40px 1fr 10px;\n          border: 1px solid lavenderblush;\n          justify-content: center;\n          padding: 20px;\n          width: 400px;\n          margin: 15px;\n          background-color: cadetblue;\n          box-shadow: 1px 1px 8px 1px #666;\n        `}\n        style={{\n          ...transitionStyle,\n        }}\n      \u003e\n        \u003cdiv\n          css={css`\n            display: grid;\n            grid-gap: 20px;\n            grid-template-columns: 1fr 20px;\n          `}\n        \u003e\n          \u003cheader\n            css={css`\n              font-size: 18pt;\n              color: white;\n            `}\n          \u003e\n            {title}\n          \u003c/header\u003e\n          \u003cdiv\u003e\n            \u003cIcon size={20} icon={closeIcon} onClick={close} /\u003e\n          \u003c/div\u003e\n        \u003c/div\u003e\n        \u003cdiv\n          css={css`\n            display: grid;\n            grid-gap: 15px;\n            grid-template-columns: 200px 1fr;\n          `}\n        \u003e\n          \u003cimg height=\"200\" width=\"200\" src={imageUri} alt=\"pic\" /\u003e\n          \u003carticle\n            css={css`\n              color: #141414;\n            `}\n          \u003e\n            {message}\n          \u003c/article\u003e\n        \u003c/div\u003e\n        {alertTimeout === 0\n          ? null\n          : showProgressBar \u0026\u0026 (\n              \u003cdiv\n                style={{\n                  height: '10px',\n                  backgroundColor: `${progressBarColor}`,\n                  ...progressStyle,\n                  ...progressTransitionStyles[state],\n                }}\n              /\u003e\n            )}\n      \u003c/div\u003e\n    );\n  }\n}\n\nMyAlert.propTypes = {\n  close: PropTypes.func,\n  title: PropTypes.string,\n  message: PropTypes.string,\n  imageUri: PropTypes.string,\n};\n\nMyAlert.defaultProps = {\n  close: () =\u003e {},\n  title: 'Default Title',\n  message: 'Default Message',\n  imageUri: '',\n};\n\nexport default MyAlert;\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsbardian%2Freact-alerts-plus","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsbardian%2Freact-alerts-plus","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsbardian%2Freact-alerts-plus/lists"}