Snackbar

Base on https://iamhosseindhv.com/notistack
and https://material-ui.com/components/snackbars/#snackbar

Note

autoHideDuration default value was calculated base on length of message

autoHideDuration = Math.min(Math.max(message?.length * 50, 2000), 10000);

Basic usage

In root, add Snackbar component

import { Snackbar } from '@doopage/react-ui-kit';

const App = () => (
  <>
    {/*your root component*/}
    <Snackbar />
  </>
);

export default App;

And any where you need, call showSnackbar func to show your snackbar

import { closeSnackbar, showSnackbar } from '@doopage/react-ui-kit';
const id = showSnackbar('My Snack bar')
closeSnackbar(id)

Playground

Basic

Click button to show snack bar

<div>Click button to show snack bar</div>
<Snackbar />
<Button onClick={() => showSnackbar('Hi, I am snackbar')} color="gray">
  Default
</Button>
<Button
  onClick={() => showSuccessSnackbar('Hi, I am snackbar', { persist: true })}
  color="success"
>
  Success
</Button>
<Button onClick={() => showInfoSnackbar('Hi, I am snackbar')} color="info">
  Info
</Button>
<Button
  onClick={() => showWarningSnackbar('Hi, I am snackbar')}
  color="warning"
>
  Warning
</Button>
<Button onClick={() => showErrorSnackbar('Hi, I am snackbar')} color="danger">
  Error
</Button>

<div>Click button to show snack bar</div>
<Snackbar />
<Button onClick={() => showSnackbar('Hi, I am snackbar')} color="gray">
  Default
</Button>
<Button
  onClick={() => showSuccessSnackbar('Hi, I am snackbar', { persist: true })}
  color="success"
>
  Success
</Button>
<Button onClick={() => showInfoSnackbar('Hi, I am snackbar')} color="info">
  Info
</Button>
<Button
  onClick={() => showWarningSnackbar('Hi, I am snackbar')}
  color="warning"
>
  Warning
</Button>
<Button onClick={() => showErrorSnackbar('Hi, I am snackbar')} color="danger">
  Error
</Button>

Persist

() => {
  const [id, setId] = useState()
  return (
    <>
      <Button
        onClick={() =>
          setId(showPrimarySnackbar('Hi, I am snackbar', { persist: true }))
        }
        color="primary"
      >
        Persist snackbar
      </Button>
      <Button onClick={() => closeSnackbar(id)} color="gray">
        Close snackbar
      </Button>
    </>
  )
}

() => {
  const [id, setId] = useState()
  return (
    <>
      <Button
        onClick={() =>
          setId(showPrimarySnackbar('Hi, I am snackbar', { persist: true }))
        }
        color="primary"
      >
        Persist snackbar
      </Button>
      <Button onClick={() => closeSnackbar(id)} color="gray">
        Close snackbar
      </Button>
    </>
  )
}

Advanced

You can pass any material-ui snackbar props to either component or showSnackbar prop.

Enable custom snackbar

() => {
  const [enable, setEnable] = useState(false)
  return (
    <>
      <Checkbox
        label={'Enable custom snackbar'}
        onChange={event => setEnable(event.target.checked)}
      />
      {enable ? (
        <>
          <Snackbar
            autoHideDuration={2000}
            anchorOrigin={{
              vertical: 'bottom',
              horizontal: 'left',
            }}
            maxSnack={2}
            action={key => (
              <>
                <Button
                  onClick={() => closeSnackbar(key)}
                  simple
                  color="transparent"
                >
                  Close
                </Button>
                <Button onClick={() => closeSnackbar(key)} color="primary">
                  Action
                </Button>
              </>
            )}
          />
        </>
      ) : (
        <Snackbar />
      )}
      <Button
        onClick={() => {
          showPrimarySnackbar('Hi, I am snackbar', { autoHideDuration: 1000 })
        }}
        color="primary"
      >
        Show custom snackbar
      </Button>
      <Button
        onClick={() => {
          showPrimarySnackbar('Hi, I am snackbar', {
            anchorOrigin: { vertical: 'top', horizontal: 'left' },
          })
        }}
        color="info"
      >
        Show custom position
      </Button>
    </>
  )
}

() => {
  const [enable, setEnable] = useState(false)
  return (
    <>
      <Checkbox
        label={'Enable custom snackbar'}
        onChange={event => setEnable(event.target.checked)}
      />
      {enable ? (
        <>
          <Snackbar
            autoHideDuration={2000}
            anchorOrigin={{
              vertical: 'bottom',
              horizontal: 'left',
            }}
            maxSnack={2}
            action={key => (
              <>
                <Button
                  onClick={() => closeSnackbar(key)}
                  simple
                  color="transparent"
                >
                  Close
                </Button>
                <Button onClick={() => closeSnackbar(key)} color="primary">
                  Action
                </Button>
              </>
            )}
          />
        </>
      ) : (
        <Snackbar />
      )}
      <Button
        onClick={() => {
          showPrimarySnackbar('Hi, I am snackbar', { autoHideDuration: 1000 })
        }}
        color="primary"
      >
        Show custom snackbar
      </Button>
      <Button
        onClick={() => {
          showPrimarySnackbar('Hi, I am snackbar', {
            anchorOrigin: { vertical: 'top', horizontal: 'left' },
          })
        }}
        color="info"
      >
        Show custom position
      </Button>
    </>
  )
}

Properties

Prop name	Type	Default	Required	Description
codePointAt	`(pos: number) => number \| undefined`	—	true	Returns a nonnegative integer Number less than 1114112 (0x110000) that is the code point value of the UTF-16 encoded code point starting at the string element at position pos in the String resulting from converting this object to a String. If there is no element at that position, the result is undefined. If a valid UTF-16 surrogate pair does not begin at pos, the result is the code unit at pos.
includes	`(searchString: string, position?: number \| undefined) => boolean`	—	true	Returns true if searchString appears as a substring of the result of converting this object to a String, at one or more positions that are greater than or equal to position; otherwise, returns false. @param searchString search string @param position If position is undefined, 0 is assumed, so as to search all of the String.
endsWith	`(searchString: string, endPosition?: number \| undefined) => boolean`	—	true	Returns true if the sequence of elements of searchString converted to a String is the same as the corresponding elements of this object (converted to a String) starting at endPosition – length(this). Otherwise returns false.
normalize	`{ (form: "NFC" \| "NFD" \| "NFKC" \| "NFKD"): string; (form?: string \| undefined): string; }`	—	true	Returns the String value result of normalizing the string into the normalization form named by form as specified in Unicode Standard Annex #15, Unicode Normalization Forms. Returns the String value result of normalizing the string into the normalization form named by form as specified in Unicode Standard Annex #15, Unicode Normalization Forms. @param form Applicable values: “NFC”, “NFD”, “NFKC”, or “NFKD”, If not specified default is “NFC” @param form Applicable values: “NFC”, “NFD”, “NFKC”, or “NFKD”, If not specified default is “NFC”
repeat	`(count: number) => string`	—	true	Returns a String value that is made from count copies appended together. If count is 0, the empty string is returned. @param count number of copies to append
startsWith	`(searchString: string, position?: number \| undefined) => boolean`	—	true	Returns true if the sequence of elements of searchString converted to a String is the same as the corresponding elements of this object (converted to a String) starting at position. Otherwise returns false.
anchor	`(name: string) => string`	—	true	Returns an <a> HTML anchor element and sets the name attribute to the text value @param name
big	`() => string`	—	true	Returns a <big> HTML element
blink	`() => string`	—	true	Returns a <blink> HTML element
bold	`() => string`	—	true	Returns a <b> HTML element
fixed	`() => string`	—	true	Returns a <tt> HTML element
fontcolor	`(color: string) => string`	—	true	Returns a <font> HTML element and sets the color attribute value
fontsize	`{ (size: number): string; (size: string): string; }`	—	true	Returns a <font> HTML element and sets the size attribute value Returns a <font> HTML element and sets the size attribute value
italics	`() => string`	—	true	Returns an <i> HTML element
link	`(url: string) => string`	—	true	Returns an <a> HTML element and sets the href attribute value
small	`() => string`	—	true	Returns a <small> HTML element
strike	`() => string`	—	true	Returns a <strike> HTML element
sub	`() => string`	—	true	Returns a <sub> HTML element
sup	`() => string`	—	true	Returns a <sup> HTML element
__@iterator	`() => IterableIterator<string>`	—	true	Iterator
match	`{ (matcher: { [Symbol.match](string: string): RegExpMatchArray \| null; }): RegExpMatchArray \| null; (regexp: string \| RegExp): RegExpMatchArray \| null; }`	—	true	Matches a string an object that supports being matched against, and returns an array containing the results of that search. Matches a string with a regular expression, and returns an array containing the results of that search. @param matcher An object that supports being matched against. @param regexp A variable name or string literal containing the regular expression pattern and flags.
replace	`{ (searchValue: { [Symbol.replace](string: string, replaceValue: string): string; }, replaceValue: string): string; (searchValue: { [Symbol.replace](string: string, replacer: (substring: string, ...args: any[]) => string): string; }, replacer: (substring: string, ...args: any[]) => string): string; (searchValue: str...`	—	true	Replaces text in a string, using an object that supports replacement within a string. Replaces text in a string, using an object that supports replacement within a string. Replaces text in a string, using a regular expression or search string. Replaces text in a string, using a regular expression or search string. @param searchValue A object can search for and replace matches within a string. @param replaceValue A string containing the text to replace for every successful match of searchValue in this string. @param searchValue A object can search for and replace matches within a string. @param replacer A function that returns the replacement text. @param searchValue A string to search for. @param replaceValue A string containing the text to replace for every successful match of searchValue in this string. @param searchValue A string to search for. @param replacer A function that returns the replacement text.
search	`{ (searcher: { [Symbol.search](string: string): number; }): number; (regexp: string \| RegExp): number; }`	—	true	Finds the first substring match in a regular expression search. Finds the first substring match in a regular expression search. @param searcher An object which supports searching within a string. @param regexp The regular expression pattern and applicable flags.
split	`{ (splitter: { [Symbol.split](string: string, limit?: number \| undefined): string[]; }, limit?: number \| undefined): string[]; (separator: string \| RegExp, limit?: number \| undefined): string[]; }`	—	true	Split a string into substrings using the specified separator and return them as an array. Split a string into substrings using the specified separator and return them as an array. @param splitter An object that can split a string. @param limit A value used to limit the number of elements returned in the array. @param separator A string that identifies character or characters to use in separating the string. If omitted, a single-element array containing the entire string is returned. @param limit A value used to limit the number of elements returned in the array.
padStart	`(maxLength: number, fillString?: string \| undefined) => string`	—	true	Pads the current string with a given string (possibly repeated) so that the resulting string reaches a given length. The padding is applied from the start (left) of the current string. @param maxLength The length of the resulting string once the current string has been padded. If this parameter is smaller than the current string’s length, the current string will be returned as it is. @param fillString The string to pad the current string with. If this string is too long, it will be truncated and the left-most part will be applied. The default value for this parameter is “ “ (U+0020).
padEnd	`(maxLength: number, fillString?: string \| undefined) => string`	—	true	Pads the current string with a given string (possibly repeated) so that the resulting string reaches a given length. The padding is applied from the end (right) of the current string. @param maxLength The length of the resulting string once the current string has been padded. If this parameter is smaller than the current string’s length, the current string will be returned as it is. @param fillString The string to pad the current string with. If this string is too long, it will be truncated and the left-most part will be applied. The default value for this parameter is “ “ (U+0020).
trimEnd	`() => string`	—	true	Removes the trailing white space and line terminator characters from a string.
trimStart	`() => string`	—	true	Removes the leading white space and line terminator characters from a string.
trimLeft	`() => string`	—	true	Removes the trailing white space and line terminator characters from a string.
trimRight	`() => string`	—	true	Removes the leading white space and line terminator characters from a string.
toString	`() => string`	—	false	Returns a string representation of a string.
charAt	`(pos: number) => string`	—	true	Returns the character at the specified index. @param pos The zero-based index of the desired character.
charCodeAt	`(index: number) => number`	—	true	Returns the Unicode value of the character at the specified location. @param index The zero-based index of the desired character. If there is no character at the specified index, NaN is returned.
concat	`(...strings: string[]) => string`	—	true	Returns a string that contains the concatenation of two or more strings. @param strings The strings to append to the end of the string.
indexOf	`(searchString: string, position?: number \| undefined) => number`	—	true	Returns the position of the first occurrence of a substring. @param searchString The substring to search for in the string @param position The index at which to begin searching the String object. If omitted, search starts at the beginning of the string.
lastIndexOf	`(searchString: string, position?: number \| undefined) => number`	—	true	Returns the last occurrence of a substring in the string. @param searchString The substring to search for. @param position The index at which to begin searching. If omitted, the search begins at the end of the string.
localeCompare	`{ (that: string): number; (that: string, locales?: string \| string[] \| undefined, options?: CollatorOptions \| undefined): number; }`	—	true	Determines whether two strings are equivalent in the current locale. Determines whether two strings are equivalent in the current or specified locale. @param that String to compare to target string @param that String to compare to target string @param locales A locale string or array of locale strings that contain one or more language or locale tags. If you include more than one locale string, list them in descending order of priority so that the first entry is the preferred locale. If you omit this parameter, the default locale of the JavaScript runtime is used. This parameter must conform to BCP 47 standards; see the Intl.Collator object for details. @param options An object that contains one or more properties that specify comparison options. see the Intl.Collator object for details.
slice	`(start?: number \| undefined, end?: number \| undefined) => string`	—	true	Returns a section of a string. @param start The index to the beginning of the specified portion of stringObj. @param end The index to the end of the specified portion of stringObj. The substring includes the characters up to, but not including, the character indicated by end. If this value is not specified, the substring continues to the end of stringObj.
substring	`(start: number, end?: number \| undefined) => string`	—	true	Returns the substring at the specified location within a String object. @param start The zero-based index number indicating the beginning of the substring. @param end Zero-based index number indicating the end of the substring. The substring includes the characters up to, but not including, the character indicated by end. If end is omitted, the characters from start through the end of the original string are returned.
toLowerCase	`() => string`	—	true	Converts all the alphabetic characters in a string to lowercase.
toLocaleLowerCase	`() => string`	—	true	Converts all alphabetic characters to lowercase, taking into account the host environment’s current locale.
toUpperCase	`() => string`	—	true	Converts all the alphabetic characters in a string to uppercase.
toLocaleUpperCase	`() => string`	—	true	Returns a string where all alphabetic characters have been converted to uppercase, taking into account the host environment’s current locale.
trim	`() => string`	—	true	Removes the leading and trailing white space and line terminator characters from a string.
length	`number`	—	true	Returns the length of a String object.
substr	`(from: number, length?: number \| undefined) => string`	—	true	Gets a substring beginning at the specified location and having the specified length. @param from The starting position of the desired substring. The index of the first character in the string is zero. @param length The number of characters to include in the returned substring.
valueOf	`() => string`	—	false	Returns the primitive value of the specified object.