{"id":22820785,"url":"https://github.com/kristofferandreasen/react-announcement","last_synced_at":"2025-04-09T12:04:34.990Z","repository":{"id":41738279,"uuid":"232332555","full_name":"kristofferandreasen/react-announcement","owner":"kristofferandreasen","description":"📣 Push out beautiful website announcements in React 📣 An NPM package to quickly convey your message to visitors.","archived":false,"fork":false,"pushed_at":"2023-01-06T01:22:32.000Z","size":7370,"stargazers_count":159,"open_issues_count":21,"forks_count":15,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-02T06:47:22.492Z","etag":null,"topics":["create-react-library","hacktoberfest","javascript","react","reactjs","typescript"],"latest_commit_sha":null,"homepage":"https://kristofferandreasen.github.io/react-announcement/","language":"TypeScript","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/kristofferandreasen.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-01-07T13:39:57.000Z","updated_at":"2025-01-08T10:26:44.000Z","dependencies_parsed_at":"2023-02-05T01:17:03.276Z","dependency_job_id":null,"html_url":"https://github.com/kristofferandreasen/react-announcement","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/kristofferandreasen%2Freact-announcement","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kristofferandreasen%2Freact-announcement/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kristofferandreasen%2Freact-announcement/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kristofferandreasen%2Freact-announcement/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kristofferandreasen","download_url":"https://codeload.github.com/kristofferandreasen/react-announcement/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248036063,"owners_count":21037092,"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":["create-react-library","hacktoberfest","javascript","react","reactjs","typescript"],"created_at":"2024-12-12T15:27:12.263Z","updated_at":"2025-04-09T12:04:34.931Z","avatar_url":"https://github.com/kristofferandreasen.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg src=\"./media/small-header.png\" alt=\"react-announcement\"\u003e\n\u003c/p\u003e\n\n\u003cdiv align=\"center\"\u003e\n  📣 Push out beautiful website announcements in React 📣\n\u003c/div\u003e\n\u003cdiv align=\"center\"\u003e\n  This simple and modern component makes it easier for you to engage with your visitors in a non-intrusive way.\n  The component is fully responsive and will render perfectly on desktop, tablets and mobile.\n\u003c/div\u003e\n\n\u003cbr /\u003e\n\n\u003cdiv align=\"center\"\u003e\n  \u003c!-- NPM version --\u003e\n  \u003ca href=\"https://www.npmjs.com/package/react-announcement\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/v/react-announcement.svg\"\n      alt=\"NPM version\" /\u003e\n  \u003c/a\u003e\n  \u003c!-- Downloads --\u003e\n  \u003ca href=\"https://www.npmjs.com/package/react-announcement\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/dt/react-announcement.svg\"\n      alt=\"Downloads\" /\u003e\n  \u003c/a\u003e\n  \u003c!-- Standard --\u003e\n  \u003ca href=\"https://standardjs.com\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/code_style-standard-brightgreen.svg\"\n      alt=\"Standard\" /\u003e\n  \u003c/a\u003e\n\u003c/div\u003e\n\n\u003cdiv align=\"center\"\u003e\n  \u003ch3\u003e\n    \u003ca href=\"https://kristofferandreasen.github.io/react-announcement/\"\u003e\n      Example Website\n    \u003c/a\u003e\n    \u003cspan\u003e | \u003c/span\u003e\n    \u003ca href=\"https://www.npmjs.com/package/react-announcement\"\u003e\n      npm module\n    \u003c/a\u003e\n    \u003cspan\u003e | \u003c/span\u003e\n    \u003ca href=\"https://github.com/kristofferandreasen/react-announcement#properties\"\u003e\n      Properties\n    \u003c/a\u003e\n    \u003cspan\u003e | \u003c/span\u003e\n    \u003ca href=\"https://github.com/kristofferandreasen/react-announcement#contributing\"\u003e\n      Contributing\n    \u003c/a\u003e\n  \u003c/h3\u003e\n\u003c/div\u003e\n\n\u003cdiv align=\"center\"\u003e\n  \u003csub\u003eA small component to help you convert. Built with ❤︎ by\n  \u003ca href=\"https://github.com/kristofferandreasen\"\u003eKristoffer Andreasen\u003c/a\u003e\n\u003c/div\u003e\n\n\u003cbr /\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"./media/announcement-gif.gif\" alt=\"example video\"\u003e\n\u003c/p\u003e\n\n## Install\n\n```bash\nnpm install --save react-announcement\n```\n\n## Usage\n\n```tsx\nimport * as React from 'react'\nimport Logo from './logo.svg'\nimport Announcement from 'react-announcement'\n\nclass Example extends React.Component {\n  render () {\n    return (\n      \u003cAnnouncement\n          title=\"Here is your component\"\n          subtitle=\"The best announcement component for React is finally here. Install it in all your projects.\"\n          link=\"https://github.com/kristofferandreasen/react-announcement\"\n          imageSource={Logo}\n      /\u003e\n    )\n  }\n}\n```\n\n### Usage with optional properties\n\nThis example includes the optional properties in the component.\n\nThe `daysToLive` property changes to the cookie created by the component.\nThis way you can control how many days you want to wait before you show the announcement to the same user.\n\nThe `secondsBeforeBannerShows` property changes the number of seconds a user waits before the announcement is presented.\n\nThe `closeIconSize` is to allow you to change to size of the icon in the top right corner.\n\nThe `animateInDuration` changes the duration of the fade-in animation.\n\nThe `animateOutDuration` changes the duration of the fade-out animation - this is fired on the click of the close icon.\n\n```tsx\nimport * as React from 'react'\nimport Logo from './logo.svg'\nimport Announcement from 'react-announcement'\n\nclass Example extends React.Component {\n  render () {\n    return (\n      \u003cAnnouncement\n        title=\"Here is your component\"\n        subtitle=\"The best announcement component for React is finally here. Install it in all your projects.\"\n        link=\"https://github.com/kristofferandreasen/react-announcement\"\n        imageSource={Logo}\n        daysToLive={3}\n        secondsBeforeBannerShows={20}\n        closeIconSize={30}\n        animateInDuration={2000}\n        animateOutDuration={500}\n      /\u003e\n    )\n  }\n}\n```\n\n## Properties\n\nProperty | Type | Required | Default value | Description\n:--- | :--- | :--- | :--- | :---\n`title`|string|yes|| The title of the announcement\n`subtitle`|string|yes|| The general card text on the announcement\n`imageSource`|string|yes|| The image source string used on the left side of the image. Use a square image for the best results. Dimensions are 68x68 pixels.\n`link`|string|yes|| The link used when the announcement is clicked.\n`daysToLive`|number|no|7| An optional property specifying the number of days the cookie will live before the announcement is shown again to a user.\n`secondsBeforeBannerShows`|number|no|5| The number of seconds a user has to keep the page open before the announcement is shown.\n`animateInDuration`|number|no|1000| Changes the duration of the fade-in animation.\n`animateOutDuration`|number|no|30| Change the duration of the fade-out animation.\n-----\n\n## Responsive\n\nThe announcement is shown on the left side of the screen on desktop and centered at the bottom on mobile.\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"./media/mobile-gif.gif\" alt=\"mobile gif\"\u003e\n\u003c/p\u003e\n\n## Developing\n\nThe project is bootstrapped with [create-react-library](https://github.com/transitive-bullshit/create-react-library) and TypeScript has been added to the project. You can read more about the development workflow in the [project docs](https://github.com/transitive-bullshit/create-react-library).\n\nTo start developing, you need to open two terminals.\n\nIn the first tab, run from the main directory:\n```\nnpm start\n```\nThis will activate rollup to watch for any changes to your src directory and build the dist everytime.\n\nIn another terminal, navigate to the example folder:\n```\ncd example\n```\nThen run:\n```\nnpm install\n```\nand finally:\n```\nnpm start\n```\n\nThis will start up the development server allowing you to see the results.\nBe aware that the solution is setting a cookie and this cookie will be stored in your browser.\nIn order to see the banner again, you will need to open the localhost link in incognito or clear your browser cookies.\n\n## Contributing\n\nYour contributions are always welcome!\nPlease have a look at the [contribution guidelines](https://github.com/kristofferandreasen/react-announcement/blob/master/CONTRIBUTING.md) first 🎉\n\n## License\n\nMIT © [kristofferandreasen](https://github.com/kristofferandreasen)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkristofferandreasen%2Freact-announcement","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkristofferandreasen%2Freact-announcement","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkristofferandreasen%2Freact-announcement/lists"}