react-announcement-bar v0.0.1

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 px
• padding (string) - padding of announcement bar in px
• backgroundColor (string) - background color of announcement bar
• iconColor (string) - close icon color
• topOffset (string) - distance of announcement bar from top in px default 0px
• relative (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>
      ...
    );
  },
});