0.20.1 • Published 3 years ago
@terra-dev/snackbar v0.20.1
@terra-dev/snackbar
TODO
https://anchor-storybook.vercel.app/?path=/story/core-snackbar--basic
API
- Add the
<SnackbarProvider>
on your top node of App.
function App() {
<SnackbarProvider>{children}</SnackbarProvider>;
}
- Assign the
snackbarContainer
ref object to some<div>
to use as the snackbar container.
function Component({ children }) {
const { snackbarContainerRef } = useSnackbar();
return (
<Container>
{children}
<SnackbarContainer ref={snackbarContainerRef} />
</Container>
);
}
const Container = styled.div`
position: relative;
width: 700px;
height: 400px;
background-color: #000000;
`;
const SnackbarContainer = styled.div`
position: absolute;
right: 10px;
bottom: 10px;
display: flex;
flex-direction: column-reverse;
justify-content: right;
align-items: flex-end;
> * {
margin-top: 10px;
}
`;
- You can your
addSnackbar()
function anywhere in the<SnackbarProvider>
import { SnackbarContent } from '@material-ui/core';
function Component() {
const { addSnackbar } = useSnackbar();
const onClick = useCallback(() => {
addSnackbar(<SnackbarContent message="HELLO SNACKBAR!" />);
}, [addSnackbar]);
return <button onClick={onClick}>Open a snackbar</button>;
}
Sample Codes
__stories__/Snackbar.stories.tsx
import {
IconButton,
SnackbarContent as MuiSnackbarContent,
SnackbarContentProps,
} from '@material-ui/core';
import { Close } from '@material-ui/icons';
import {
Snackbar,
SnackbarControl,
SnackbarProvider,
useSnackbar,
} from '@terra-dev/snackbar';
import React, { ComponentType, useRef } from 'react';
import styled from 'styled-components';
let count: number = 0;
export default {
title: 'core/Snackbar',
decorators: [
(Story: ComponentType) => (
<SnackbarProvider>
<Story />
</SnackbarProvider>
),
],
};
export const Basic = () => {
const { addSnackbar, snackbarContainerRef } = useSnackbar();
return (
<div>
<button
onClick={() => {
count++;
addSnackbar(
<Snackbar>
<MuiSnackbarContent message={`${count} HELLO SNACKBAR!`} />
</Snackbar>,
);
}}
>
Add a MUI Snackbar
</button>
<SnackbarContainer ref={snackbarContainerRef} />
</div>
);
};
export const CustomElement = () => {
const { addSnackbar, snackbarContainerRef } = useSnackbar();
return (
<div>
<button
onClick={() => {
count++;
addSnackbar(
<Snackbar>
<CustomElementSnackbar>
{count} HELLO SNACKBAR!
</CustomElementSnackbar>
</Snackbar>,
);
}}
>
Add a Custom Snackbar
</button>
<SnackbarContainer ref={snackbarContainerRef} />
</div>
);
};
export const Control = () => {
const { addSnackbar, snackbarContainerRef } = useSnackbar();
const snackbarControlRef = useRef<SnackbarControl | null>(null);
return (
<div>
<button
onClick={() => {
snackbarControlRef.current?.close();
count++;
snackbarControlRef.current = addSnackbar(
<Snackbar autoClose={false}>
<MuiSnackbarContent message={`${count} HELLO SNACKBAR!`} />
</Snackbar>,
);
}}
>
Add a MUI Snackbar
</button>
<button
onClick={() => {
snackbarControlRef.current?.close();
}}
>
Close Snackbar
</button>
<button
onClick={() => {
snackbarControlRef.current?.update(
<Snackbar autoClose={false}>
<MuiSnackbarContent
message={`CHANAGED CONTENT! ${Math.floor(
Math.random() * 1000,
)}`}
/>
</Snackbar>,
);
}}
>
Update Snackbar content
</button>
<SnackbarContainer ref={snackbarContainerRef} />
</div>
);
};
const CustomElementSnackbar = styled.div`
display: inline-block;
padding: 10px;
border: 10px solid white;
font-size: 16px;
color: red;
`;
export const With_Action = () => {
const { addSnackbar, snackbarContainerRef } = useSnackbar();
return (
<div>
<button
onClick={() => {
count++;
addSnackbar(
<Snackbar>
<ActionSnackbar message={`${count} HELLO SNACKBAR!`} />
</Snackbar>,
);
}}
>
Add a Action Snackbar
</button>
<SnackbarContainer ref={snackbarContainerRef} />
</div>
);
};
const ActionSnackbar = styled(
({
close,
...props
}: SnackbarContentProps & {
close?: () => void;
}) => {
return (
<MuiSnackbarContent
{...props}
action={[
<IconButton
key="close"
aria-label="close"
color="inherit"
onClick={close}
>
<Close />
</IconButton>,
]}
/>
);
},
)``;
export const Prevent_Auto_Close = () => {
const { addSnackbar, snackbarContainerRef } = useSnackbar();
return (
<div>
<button
onClick={() => {
count++;
addSnackbar(
<Snackbar autoClose={false}>
<ActionSnackbar message={`${count} HELLO SNACKBAR!`} />
</Snackbar>,
);
}}
>
Add a Manual Close Snackbar
</button>
<SnackbarContainer ref={snackbarContainerRef} />
</div>
);
};
const SnackbarContainer = styled.div`
position: fixed;
right: 10px;
bottom: 10px;
display: flex;
flex-direction: column-reverse;
justify-content: right;
align-items: flex-end;
> * {
margin-top: 10px;
}
`;
0.20.1
3 years ago
0.20.0
3 years ago
0.19.0
3 years ago
0.18.0
3 years ago
0.17.0
3 years ago
0.17.1
3 years ago
0.16.0
3 years ago
0.16.0-alpha.4
3 years ago
0.16.0-alpha.1
3 years ago
0.16.0-alpha.3
3 years ago
0.16.0-alpha.2
3 years ago
0.14.0
3 years ago
0.15.0
3 years ago
0.13.0
3 years ago
0.13.1
3 years ago
0.12.2
3 years ago
0.10.0
3 years ago
0.11.0
3 years ago
0.10.1
3 years ago
0.12.0
3 years ago
0.10.2
3 years ago
0.8.0
3 years ago
0.12.1
3 years ago
0.5.0
3 years ago
0.4.0
3 years ago
0.7.0
3 years ago
0.6.0
3 years ago
0.3.0
3 years ago
0.2.0
3 years ago
0.1.0
3 years ago