@crave/farmblocks-alert
Version:
A React Component for displaying alert bar messages
60 lines (43 loc) • 2.45 kB
Markdown
A React component for displaying messages on an alert bar.
```
npm install @crave/farmblocks-alert
```
```jsx
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);
```
See it [in the source](https://github.com/CraveFood/farmblocks/blob/master/packages/alert/src/Alert.js#L24-L35)
| 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` |
MIT