0.0.4 • Published 5 years ago

@brancol/core-test v0.0.4

Weekly downloads
-
License
ISC
Repository
github
Last release
5 years ago

@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.

NameTypeDefaultDescriptionValues
defaultPositionstringtrPosition of the Snackbar'tl', 'tc', 'tr', 'bl', 'bc', 'br'
defaultDisplayDurationnumber5000Time that the Snackbar will be displayed1000 - 100000
defaultAnimationDelaynumber500Time that the Snackbar will take to fadein and fadeout100 - 3000
successColorstring'#28c960'Default success color of the SnackbarHEX Color
warningColorstring'#f49716'Default warning color of the SnackbarHEX Color
dangerColorstring'#fc5050'Default danger color of the SnackbarHEX Color
successIconstring'fa fa-check-circle'Default success icon of the SnackbarFontAwesome Icon
warningIconstring'fa fa-exclamation-triangle'Default warning icon of the SnackbarFontAwesome Icon
dangerIconstring'fa fa-exclamation-circle'Default danger icon of the SnackbarFontAwesome Icon
showIconbooleantrueIndicates if the left icon will be displayedtrue - false
showCloseIconbooleantrueIndicates if the close icon will be displayedtrue - false
render(props) => NodenullA custom Snackbar component with all propsReactNode

Options

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

NameTypeDescriptionValues
durationnumberTime that the Snackbar will be displayed1000 - 100000
animationDelaynumberTime that the Snackbar will take to fadein and fadeout100 - 3000
positionstringPosition of the Snackbar'tl', 'tc', 'tr', 'bl', 'bc', 'br'
displayIconbooleanIndicates if the left icon will be displayedtrue - false
displayCloseIconbooleanIndicates if the close icon will be displayedtrue - 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.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.