hawk-ui: Basic Toast Component
npm install @hawk-ui/toast
#### To install a component run$ npm install @hawk-ui/toast --save
#### Please import CSS styles via
``scss noeditor`
@import '/path__to__node_modules/@hawk-ui/toast/dist/index.min.css
#### Top Left:
Demo
`js static`
import Toast from '@hawk-ui/toast';js
initialState = {
isShow: false,
position: null,
};
#### Top Right
Demo
js static
import Toast from '@hawk-ui/toast';
`
js
initialState = {
isShow: false,
position: null,
};
className="hawk-button"
onClick={() => {
setState({
position: 'top-right',
isShow: !state.isShow,
});
}}
>
Top Right
position: 'fixed', top: 0, right: 0, zIndex: 10
} : null}
>
position={state.position}
type="success"
isIcon
hideCloseOption
>
Toast Title
Toast Message
#### Bottom Right
Demo
js static
import Toast from '@hawk-ui/toast';
`
js
initialState = {
isShow: false,
position: null,
};
className="hawk-button"
onClick={() => {
setState({
position: 'bottom-right',
isShow: !state.isShow,
});
}}
>
Bottom Right
position: 'fixed', bottom: 0, right: 0, zIndex: 10
} : null}
>
position={state.position}
type="success"
isIcon
hideCloseOption
>
Toast Title
Toast Message
#### Bottom Left
Demo
js static
import Toast from '@hawk-ui/toast';
`
js
initialState = {
isShow: false,
position: null,
};
className="hawk-button"
onClick={() => {
setState({
position: 'bottom-left',
isShow: !state.isShow,
});
}}
>
Bottom Left
position: 'fixed', bottom: 0, left: 0, zIndex: 10
} : null}
>
position={state.position}
type="success"
isIcon
hideCloseOption
>
Toast Title
Toast Message