@crave/farmblocks-alert

Farmblocks-Alert

A React component for displaying messages on an alert bar.

Installation

npm install @crave/farmblocks-alert

Spec

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