@crave/farmblocks-alert

A React Component for displaying alert bar messages

Stats

StarsIssuesVersionUpdatedCreatedSize
@crave/farmblocks-alert
20236.1.11a month ago4 years agoMinified + gzip package size for @crave/farmblocks-alert in KB

Readme

Farmblocks-Alert

A React component for displaying messages on an alert bar.

Installation

npm install @crave/farmblocks-alert

Spec

screen shot 2017-09-24 at 6 13 31 pm

Usage

const React = require("react");
const ReactDOM = require("react-dom");
const Alert = require("@crave/farmblocks-alert").default;
const { AlertTypes } = require("@crave/farmblocks-alert");

const root = document.createElement("div");

ReactDOM.render(
  <Alert
    dismissable
    type={AlertTypes.POSITIVE}
    text="Positive alert!"
    onDismiss={() => {
      console.log("dismiss button clicked");
    }}
  />,
  root
);

document.body.appendChild(root);

API

See it in the source

Props

Property Description Type Default value
text text to be displayed at the alert (required) string
type changes the alert color oneOf(AlertTypes) AlertTypes.NEWS
dismissable allows the alert to be closed. If false it can't be closed by user action. boolean true
autoRemove automatically closes the alert after the amount of time set in visibleTime prop boolean true
onDismiss function to be called when the alert is closed function () => null
visibleTime amount of time that the alert should be visible once autoRemove is true -- in milliseconds number 2000
zIndex custom zIndex number 2500
bottomAligned align the alert on the bottom of its container, instead of the default top alignment boolean false

License

MIT

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.