6.0.0-beta.1 • Published 5 years ago
@lightspeed/cirrus-alert v6.0.0-beta.1
Alert
A cirrus themed Alert Component.
Installation
- Since we use peer dependencies to minimize library duplication, ensure you have the following dependencies loaded within your project
yarn add @lightspeed/cirrus-tokens emotion@9 react-emotion@9 styled-system@3 polished@2
- Install the component library
yarn add @lightspeed/cirrus-alert
- Hook the
<ThemeProvider>
and the theme in your app.
// 1. Import the theme provider from emotion-theming
// This is needed to forward all our tokens to the components
import { ThemeProvider } from 'emotion-theming';
// 2. Import the base theme from cirrus-tokens
// There's nothing magical about this file. it's literally
// a plain old javascript object with keys and values that
// map to the tokens/design-system
import cirrusTheme from '@lightspeed/cirrus-tokens/theme/default';
/* Within your root app component */
class App extends React.Component {
render() {
return (
{/*
3. Wrap the children with ThemeProvider and pass in
the cirrus theme into the theme prop.
*/}
<ThemeProvider theme={cirrusTheme}>
{/* Whatever children */ }
</ThemeProvider>
);
}
}
- Import
Alert
and use right away!
React Component
Component props
Prop | Type | Description |
---|---|---|
type | info , warning , danger , or success | default is info |
title | string | |
onClose | fn() | custom fn(event) passed the event object |
noCloseBtn | boolean | |
children (required) | any | The content of the alert |
Example
import React from 'react';
import Alert from '@lightspeed/cirrus-alert';
const MyComponent = () =>
<div>
<Alert type="info" title="My Title">Alert content</Alert>
</div>;
export default MyComponent;
6.0.0-beta.1
5 years ago
6.0.0-beta.0
5 years ago
6.0.0-alpha.0
5 years ago
5.0.0
5 years ago
4.0.0
6 years ago
3.0.0
6 years ago
2.0.0
6 years ago
1.1.4
6 years ago
1.1.3
6 years ago
1.1.2
6 years ago
1.1.1
6 years ago
1.1.0
6 years ago
1.0.3
6 years ago
1.0.2
6 years ago
1.0.1
6 years ago
1.0.0
7 years ago
0.2.6
7 years ago
0.2.5
7 years ago
0.2.4
7 years ago
0.2.3
7 years ago
0.2.2
7 years ago
0.2.0
7 years ago