npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@brancol/react-snackbar

v0.3.0

Published

Brancol - React Snackbar

Downloads

17

Readme

@brancol/react-snackbar

Snackbar Component developed for React JS.

This project was developed for custom styles. You have a set of props that can change the snackbar appearance, but you may also create your own with the SnackbarProvider render prop.

Table of Contents

Installation

To install, you can use npm or yarn:

$ npm install @brancol/react-snackbar
$ yarn add @brancol/react-snackbar

Usage

To use the snackbar you must place a Context Provider on the top of the project.

index.js

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'

import SnackbarProvider from '@brancol/react-snackbar'

ReactDOM.render(
  <SnackbarProvider>
    <App />
  </SnackbarProvider>,
  document.getElementById('root')
)

App.js

import React from 'react'
import { useSnackbar } from '@brancol/react-snackbar'

export function App() {
  const snackbar = useSnackbar()
  return (
    <div>
      <h1>App</h1>
      <div>
        <button onClick={() => snackbar.showSuccess('Success Message')}>Show Success</button>
        <button onClick={() => snackbar.showWarning('Warning Message')}>Show Warning</button>
        <button onClick={() => snackbar.showDanger('Danger Message')}>Show Danger</button>
      </div>
    </div>
  )
}

Examples

Want more examples on how to use this snackbar or more use cases for your application?

Checkout my Javascript React Tailwind - Base Project Or if you using Typescript React Tailwind - Typescript Base Project

Props

Here is a full detailed list of the props you can send to use the SnackbarProvider.

| Name | Type | Default | Description | Values | | ---------------------- | --------------- | --------- | ------------------------------------------------------ | ------------------------------------ | | defaultPosition | string | tr | Position of the Snackbar | ['tl', 'tc', 'tr', 'bl', 'bc', 'br'] | | defaultDisplayDuration | number | 5000 | Time that the Snackbar will be displayed | 1000 - 100000 | | defaultAnimationDelay | number | 500 | Time that the Snackbar will take to fadein and fadeout | 100 - 3000 | | successColor | string | '#28c960' | Default success color of the Snackbar | HEX Color | | warningColor | string | '#f49716' | Default warning color of the Snackbar | HEX Color | | dangerColor | string | '#fc5050' | Default danger color of the Snackbar | HEX Color | | showIcon | boolean | true | Indicates if the left icon will be displayed | true - false | | showCloseIcon | boolean | true | Indicates if the close icon will be displayed | true - false | | render | (props) => Node | null | A custom Snackbar component with all props | ReactNode |

Options

When calling the useSnackbar open methos, you can send a list of options for that specific open.

| Name | Type | Description | Values | | ---------------- | ------- | ------------------------------------------------------ | ------------------------------------ | | duration | number | Time that the Snackbar will be displayed | 1000 - 100000 | | animationDelay | number | Time that the Snackbar will take to fadein and fadeout | 100 - 3000 | | position | string | Position of the Snackbar | ['tl', 'tc', 'tr', 'bl', 'bc', 'br'] | | displayIcon | boolean | Indicates if the left icon will be displayed | true - false | | displayCloseIcon | boolean | Indicates if the close icon will be displayed | true - false |

Tests

This snackbar component is already tested using Jest and Enzyme. You may create your own tests using this modules as well.

Projects

You can find other projects and more stuff in my:

Github Profile Personal Website Instagram Profile

ChangeLog Header

0.3.0

  • Fixed mobile responsivity bug.
  • Added react-icons package and removed fontawesome dependency.

0.2.0

  • Added tests with jest for a better security of the module.
  • Fixed bugs with custom duration and position in show call.
  • Fixed some css names for better using and testing.

0.1.0

  • Removed Tailwind must need from CSS.
  • Added custom css class for styling.
  • Fixed props from Options and Provider.
  • Updated docs with new Props.
  • Updated some padding visuals.