npm install --save react-announcement
Usage with optional properties
This example includes the optional properties in the component.
The daysToLive property changes to cookie created by the component. This way you can control how many days you want to wait before you show the announcement to the same user.
The secondsBeforeBannerShows property changes the amount of seconds a user wait before the announcement is presented.
The closeIconSize is to allow you to change to size of the icon in the top right corner.
||string||yes||The title of the announcement|
||string||yes||The general card text on the announcement|
||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.|
||string||yes||The link used when the announcement is clicked.|
||number||no||7||An optional property specifying the number of days the cookie will live before the announcement is shown again to a user.|
||number||no||5||The number of seconds a user has to keep the page open before the announcement is shown.|
||number||no||30||The size of the close icon shown in the top right corner of the announcement.|
The announcement is shown in the left side of the screen on desktop and centered at the bottom on mobile.
To start developing, you need to open two terminals.
In the first tab, run from the main directory:
This will activate rollup to watch for any changes to your src directory and build the dist everytime.
In another terminal, navigate to the example folder:
This will start up the development server allowing you to see the results. Be aware that the solution is setting a cookie and this cookie will be stored in your browser. In order to see the banner again, you will need to open the localhost link in incognito or clear your browser cookies.
Publishing to NPM
You can publish to NPM with the following commands. Make sure to update peerDependencies and package.json version of the library.
Deploy to Github Pages
The example folder is published to Github Pages to provide an example page of the library. This is done by using the publish command.
Your contributions are always welcome! Please have a look at the contribution guidelines first 🎉
MIT © kristofferandreasen