Spacebar-ui NPM

spacebar-ui React component library

Created and maintained by Space Bar Keepers.

Installation

npm i spacebar-ui

Available Components

Avatar

Import component:

import { Avatar } from "spacebar-ui"

Attributes:

backgroundColor optional

Background color of Avatar in case of images with transparent background or in case od non-image child.

type: string\ default value: "#ccc"\ valid values:

3-char hex ("#fff")
6-char hex ("#ffffff")
rgb ("rgb(255, 255, 255)")
rgba ("rgba(255, 255, 255, 1)")
hsl ("hsl(0, 100%, 100%)")
hsla ("hsla(100, 100%, 50%, 1)")

objectFit optional

object-fit attribute of the inner img-child. Corresponding with CSS object-fit documentation \ type: string\ default value: "cover"\ valid values:

"contain"
"cover"
"fill"
"none"
"scale-down"
padding optional
Inner padding of the Avatar.\ type: number\ default value: 0\

size optional

Size of the Avatar.\ type: number\ default value: 40\

variant optional

Variant of the Avatar.\ type: string\ default value: none\ valid values:

"rounded" (square with rounded corners)
"circle" (circular shape)

Example:

import React from "react";
import { Avatar } from "spacebar-ui";

export default function App() {
  return (
    <div>
      <Avatar 
        variant="rounded" 
        backgroundColor="#f00"
        size={60}
      >
        <img 
          src={"https://upload.wikimedia.org/wikipedia/commons/thumb/2/24/Circle-icons-image.svg/1024px-Circle-icons-image.svg.png"} 
          alt={"user avatar"} 
        />
      </Avatar>
    </div>
  );
}

Example available at CodeSandbox.

Snackbar

Import component:

import { Snackbar } from "spacebar-ui"

Attributes:

snackbarOpen required

State with boolean value. Determines visibility of Snackbar.\ type: boolean

setSnackbarOpen required

Function for changing snackbarOpen state.\ type: function

snackbarMessage required

String with Snackbar message.\ type: string

snackbarVariant optional

Predefined color variations. If specified color and backgroundColor attributes become ineffective. \ type: string\ valid values:

"success" (green background, white text)
"error" (red background, white text)

backgroundColor optional

Background color of Snackbar block. Will not be considered if any snackbarVariant is specified.

type: string\ default value: "#fff"\ valid values:

3-char hex ("#fff")
6-char hex ("#ffffff")
rgb ("rgb(255, 255, 255)")
rgba ("rgba(255, 255, 255, 1)")
hsl ("hsl(0, 100%, 100%)")
hsla ("hsla(100, 100%, 50%, 1)")

color optional

Text color inside Snackbar block. Will not be considered if any snackbarVariant is specified.

type: string\ default value: "#000"\ valid values:

3-char hex ("#fff")
6-char hex ("#ffffff")
rgb ("rgb(255, 255, 255)")
rgba ("rgba(255, 255, 255, 1)")
hsl ("hsl(0, 100%, 100%)")
hsla ("hsla(100, 100%, 50%, 1)")

timeout optional

Rewrites time after which Snackbar closes. Defined in milliseconds.\ type: number\ default value: 2000

Example:

import React, { useState } from "react";
import { Snackbar } from "spacebar-ui";

export default function App() {
  const [snackbarOpen, setSnackbarOpen] = useState(false);

  const handleOpenSnackbar = () => {
    setSnackbarOpen(true);
  }

  return (
    <div>
      <button onClick={handleOpenSnackbar}>Open Snackbar</button>
      <Snackbar 
        snackbarOpen={snackbarOpen} 
        setSnackbarOpen={setCustomSnackbarOpen} 
        snackbarMessage={"This is snackbar message."} 
        timeout={5000} 
        backgroundColor={"purple"} 
        color={"#fff"} 
      />
    </div>
  );
}

Example available at CodeSandbox.

ToggleSwitch

Import component:

import { ToggleSwitch } from "spacebar-ui"

Attributes:

checked required

State of ToggleSwitch.

type: boolean\ default value: false\

setChecked required

Function to set state of ToggleSwitch

type: function\

backgroundChecked optional

Background color of ToggleSwitch block when checked.

type: string\ default value: "#4fbe79"\ valid values:

3-char hex ("#fff")
6-char hex ("#ffffff")
rgb ("rgb(255, 255, 255)")
rgba ("rgba(255, 255, 255, 1)")
hsl ("hsl(0, 100%, 100%)")
hsla ("hsla(100, 100%, 50%, 1)")

backgroundUnchecked optional

Background color of ToggleSwitch block when unchecked.

type: string\ default value: "#bebebe"\ valid values:

3-char hex ("#fff")
6-char hex ("#ffffff")
rgb ("rgb(255, 255, 255)")
rgba ("rgba(255, 255, 255, 1)")
hsl ("hsl(0, 100%, 100%)")
hsla ("hsla(100, 100%, 50%, 1)")

switchColor optional

Background color of the toggle circle.

type: string\ default value: "#fff"\ valid values:

3-char hex ("#fff")
6-char hex ("#ffffff")
rgb ("rgb(255, 255, 255)")
rgba ("rgba(255, 255, 255, 1)")
hsl ("hsl(0, 100%, 100%)")
hsla ("hsla(100, 100%, 50%, 1)")

switchImage optional

Url of image/icon to put into toggle circle.

type: string\ default value: none\

Example:

import React, { useState } from "react";
import {ToggleSwitch} from "spacebar-ui"

export default function App() {
        const [checked, setChecked] = useState(false)

  return (
    <ToggleSwitch 
    backgroundUnchecked={"#00f"} 
    backgroundChecked={"#f00"}
    checked={checked}
    setChecked={setChecked}
    switchColor={"#ff0"}
    switchImage={"https://upload.wikimedia.org/wikipedia/commons/thumb/2/24/Circle-icons-image.svg/1024px-Circle-icons-image.svg.png"}
    />
  );
}

Example available at CodeSandbox.