react-announcement-bar
v0.0.1
Published
Display Announcement Bar In React On Top
Downloads
5
Maintainers
Readme
React Announcement Bar
Make Announcement Bar On React Website
Demos
Coming Soon
Installation
npm install react-announcement-bar
Overview & Basic Example
<AnnouncementBar />
You can pass HTML to this component as children. Component has following options to configure
width
(string) - width of announcement bar in px or %height
(string) - height of announcement bar in pxpadding
(string) - padding of announcement bar in pxbackgroundColor
(string) - background color of announcement bariconColor
(string) - close icon colortopOffset
(string) - distance of announcement bar from top in px default 0pxrelative
(boolean) - positioning of announcement bar relative or fixed send {true} or {false}
app.js
import React from 'react';
import { AnnouncementBar } from 'react-announcement-bar';
...
class App extends React.Component ({
render() {
return (
...
<AnnouncementBar height="60" backgroundColor="#000000" relative={false} width="100%">
{
() => {
return (
<div style={{width: "80%", margin: "auto", color: "#ffffff" }}>
Want to recieve notifications
<a href="#" style={{ fontWeight: "bold", color: "#ffffff" }}>ENABLE !</a>
</div>
)
}
}
</AnnouncementBar>
...
);
},
});