Snackbar React Component

• Docs
• Playground

Install

npm install --save @idui/react-snackbar

yarn add @idui/react-snackbar

See props in Docs

Snackbar

• Live example

import React from 'react'
import { Snackbar } from '@idui/react-snackbar'

function Example() {
    const [isSnackbarShown, setSnackbarShown] = useState(false);

    return (
        <div>
            <button onClick={() => setSnackbarShown(true)}>Show</button>
            {isSnackbarShown && (
                <Snackbar onClose={() => setSnackbarShown(false)}>
                    <Content>{children}</Content>
                </Snackbar>
            )}
        </div>
    );
}

const Content = styled.div`
  min-width: 30rem;
  max-width: 60rem;
  border-radius: 0.5rem;
  background-color: #14113c;
  box-shadow: 0 0.4rem 0.5rem rgba(0, 0, 0, 0.09),
    0 0.4rem 1.2rem rgba(0, 0, 0, 0.05), 0 0.2rem 0.6rem rgba(0, 0, 0, 0.1);
  color: #ffffff;
  padding: 1.4rem;
`;

SnackbarGroup

• Live example

import React from 'react'
import { Snackbar } from '@idui/react-snackbar'

function Example() {
    const [items, setItems] = useState([]);

    const addItem = useCallback(() => {
        setItems([...items, { id: Math.round(Math.random() * 1000) }]);
    }, [items]);

    const removeItem = useCallback(
        (itemId) => {
            if (itemId) {
                setItems(items.filter((item) => itemId !== item.id));
            } else {
                setItems(items.slice(1));
            }
        },
        [items]
    );

    return (
        <div>
            <button onClick={addItem}>Add Item</button>
            <button onClick={() => removeItem()}>Remove Item</button>
            <SnackbarGroup
                {...props}
                onClose={removeItem}
                items={items}
                renderItem={({ data, close }) => (
                    <Content>
                        <div>№ {data.id}</div>
                        <button onClick={close}>Close</button>
                    </Content>
                )}
            />
        </div>
    );
}

const Content = styled.div`
  min-width: 30rem;
  max-width: 60rem;
  border-radius: 0.5rem;
  background-color: #14113c;
  box-shadow: 0 0.4rem 0.5rem rgba(0, 0, 0, 0.09),
    0 0.4rem 1.2rem rgba(0, 0, 0, 0.05), 0 0.2rem 0.6rem rgba(0, 0, 0, 0.1);
  color: #ffffff;
  padding: 1.4rem;
  margin-bottom: 0.5rem;
  button {
    margin-top: 1rem;
  }
`;

See more details in storybook

License

MIT © [email protected]