0.7.0 • Published 2 years ago

@blaze-react/snackbar v0.7.0

Weekly downloads
57
License
ISC
Repository
-
Last release
2 years ago

Description

Use Snackbar component to show feedback about any operation performed by the user.

Usage

  • Simple warning with default icon
<Snackbar
  position={Snackbar.position.bottomRight}
  modifier={Snackbar.modifier.info}
  isActive
>
  Lorem Ispum dolor
</Snackbar>
  • Simple success with duration and custom icon
<Snackbar
  position={Snackbar.position.bottomLeft}
  modifier={Snackbar.modifier.success}
  iconName="how_to_reg"
  duration={5000}
  isActive
>
  Lorem <a href="#">Link</a>
</Snackbar>
  • Toggle example
const Notification = ({ children }) => {
  const [active, setActive] = useState(false);
  return (
    <div>
      <Button onClick={() => setActive(!active)}>Toggle</Button>
      <Snackbar
        position={Snackbar.position.topRight}
        isActive={active}
        onClose={() => setActive(false)}
      >
        {children}
      </Snackbar>
    </div>
  );
};

<Notification>
  <div>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
    <hr />
    <p>Ipsam ratione nam quae cumque sit</p>
  </div>
</Notification>;

API

Snackbar can receive a number of props as follow:
NAMETYPEDEFAULTOPTIONS
modifierstringemptyalert, info, success, warning
positionstringemptybottomLeft, bottomRight, topLeft, topRight
iConNamestringemptyMaterial Design Icons
onClosefunction() => {}
durationnumber
childrensingle/array of nodes
0.8.0-alpha.64

2 years ago

0.8.0-alpha.66

2 years ago

0.8.0-alpha.58

4 years ago

0.8.0-alpha.56

4 years ago

0.8.0-alpha.60

4 years ago

0.8.0-alpha.52

4 years ago

0.8.0-alpha.44

4 years ago

0.8.0-alpha.43

4 years ago

0.8.0-alpha.46

4 years ago

0.8.0-alpha.45

4 years ago

0.8.0-alpha.39

4 years ago

0.8.0-alpha.42

4 years ago

0.8.0-alpha.41

4 years ago

0.8.0-alpha.33

4 years ago

0.8.0-alpha.35

4 years ago

0.8.0-alpha.31

4 years ago

0.8.0-alpha.26

4 years ago

0.8.0-alpha.24

4 years ago

0.8.0-alpha.23

4 years ago

0.8.0-alpha.21

4 years ago

0.8.0-alpha.14

4 years ago

0.8.0-alpha.16

4 years ago

0.8.0-alpha.11

4 years ago

0.8.0-alpha.10

4 years ago

0.8.0-alpha.13

4 years ago

0.8.0-alpha.19

4 years ago

0.8.0-alpha.18

4 years ago

0.8.0-alpha.20

4 years ago

0.8.0-alpha.9

4 years ago

0.8.0-alpha.7

4 years ago

0.8.0-alpha.6

4 years ago

0.8.0-alpha.4

4 years ago

0.8.0-alpha.3

4 years ago

0.7.0

4 years ago

0.6.4

4 years ago

0.6.2

5 years ago

0.6.0

5 years ago

0.5.28

5 years ago

0.5.19

5 years ago

0.5.17

5 years ago

0.5.15

5 years ago

0.5.13

5 years ago

0.5.12

5 years ago

0.5.9

5 years ago

0.5.8

5 years ago

0.5.0

5 years ago

0.4.57

5 years ago

0.4.55

5 years ago

0.4.54

5 years ago

0.4.52

5 years ago

0.4.48

5 years ago

0.4.47

5 years ago

0.4.46

5 years ago

0.4.42

5 years ago

0.4.37-alpha.0

5 years ago

0.4.37

5 years ago

0.4.38

5 years ago

0.4.36

5 years ago

0.4.33

5 years ago

0.4.34

5 years ago

0.4.29

5 years ago

0.4.22

5 years ago

0.4.16

5 years ago

0.4.15

5 years ago

0.4.14

5 years ago

0.4.8

6 years ago

0.4.7

6 years ago

0.4.3

6 years ago

0.4.0

6 years ago

0.3.58

6 years ago

0.3.53

6 years ago

0.3.52

6 years ago

0.3.51

6 years ago

0.3.50

6 years ago

0.3.49

6 years ago

0.3.47

6 years ago

0.3.46

6 years ago

0.3.45

6 years ago

0.3.44

6 years ago

0.3.43

6 years ago

0.3.42

6 years ago

0.3.41

6 years ago

0.3.39

6 years ago

0.3.38

6 years ago

0.3.35

6 years ago

0.3.31

6 years ago

0.3.30

6 years ago

0.3.29

6 years ago

0.3.28

6 years ago

0.3.11

6 years ago