Button

Styling overrides

The styling of a button can be overridden using four keys, their uses should be self-explanatory:

• components.button
• components.button.disabled: pointer-events-none bg-gray-500
• components.button.primary: text-white
• components.button.secondary
• components.button.tertiary: text-gray-700 bg-white border

ButtonGroup

Styling overrides

• components.buttongroup
• components.buttongroup.outer.left
• components.buttongroup.outer.right
• components.buttongroup.inner.left: rounded-l-none
• components.buttongroup.inner.right: rounded-r-none border-r

Card

Styling overrides

• components.card.container: bg-white p-6 rounded-lg shadow-lg
• components.card.title: text-2xl font-bold mb-Z text-gray-800
• components.card.description: text-gray-700

DateInput

Styling overrides

• components.dateinput.invalid => components.form.invalid
• components.dateinput.disabled => components.form.disabled
• components.dateinput.valid
• components.dateinput.inset: -mr-3 -ml-2 rounded-l-none h-9
• components.dateinput.selector.container: absolute bg-white top-12 right-0 border border-gray-200 rounded-md
• components.dateinput.selector.header: p-2 font-bold
• components.dateinput.selector.header.buttons: cursor-pointer select-none
• components.dateinput.selector.header.icons.previous => components.icons.chevron-left
• components.dateinput.selector.header.icons.next => components.icons.chevron-right
• components.dateinput.selector.items.grid: gap-2 px-2 pb-2 w-60 text-center
• components.dateinput.selector.items.dow: font-bold select-none
• components.dateinput.selector.items.date: w-8 h-8 -m-1 flex justify-center items-center rounded-full cursor-pointer select-none
• components.dateinput.selector.highlight.other: text-gray-500

Overlay

Styling overrides

• components.overlay.color: rgba(0, 0, 0, 0.7)
• components.overlay.classes

Form

Styling overrides

• components.form.disabled: bg-gray-100 cursor-not-allowed

Label

Styling overrides

A label has a few default classes which can be overridden using the components.label.classes key.

Input

Styling overrides

• components.input.disabled => components.form.disabled
• components.input: shadow-sm block w-full sm:text-sm rounded-md border-0
• components.input.container: rounded-md border border-gray-200 focus-within:border-indigo-500 ring-0 focus-within:ring-1 ring-indigo-500
• components.input.with-inset: rounded-r-none focus:ring-transparent
• components.input.inset: flex-grow-0 flex items-center pl-2 pr-3 shadow-sm rounded-r-md border-l pointer-events-none

Autocomplete

Autocomplete works on the following JSX attributes: Input, PasswordInput. More information about the different autocompletion types see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete

Select

Styling overrides

• components.select.icons.open
• components.select.icons.close => components.select.icons.close
• components.select.icons.check
• components.select.container => relative
• components.select.enabled
• components.select.disabled => components.form.disabled
• components.select.highlight
• components.select.list : max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm
• components.select.list_item : text-gray-900 cursor-pointer select-none relative py-2 pl-3 pr-9
• components.select.dropdown : rounded-md bg-white shadow-lg

Toggle

Styling overrides

• components.toggle.disabled.color-bg: bg-gray-200
• components.toggle.disabled.color-text: text-gray-400
• components.toggle.active.color-bg: bg-green-300
• components.toggle.active.color-text: text-green-500
• components.toggle.active.icon => components.icons.check
• components.toggle.active.translate: translate-x-5
• components.toggle.inactive.color-bg: bg-red-200
• components.toggle.inactive.color-text: text-red-400
• components.toggle.inactive.icon => components.icons.cross
• components.toggle.inactive.translate: translate-x-0
• components.toggle.classes: relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full transition-colors ease-in-out duration-200 focus:outline-none
• components.toggle.classes.disabled: cursor-not-allowed
• components.toggle.classes.enabled: cursor-pointer
• components.toggle.classes.focus: focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500
• components.toggle.container.icon-inner: h-3 w-3 bg-white
• components.toggle.container.icon-outer: ease-in-out duration-200 absolute inset-0 h-full w-full flex items-center justify-center transition-opacity
• components.toggle.container.point: pointer-events-none relative inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200

Checkbox

Styling overrides

• components.checkbox.container: items-center
• components.checkbox.input: border-gray-300
• components.checkbox.label.left: mr-2
• components.checkbox.label.right: ml-2

File Input

Styling overrides

• components.fileinput.buttons.select: rounded-l-none
• components.fileinput.buttons.select.with-remove: rounded-r-none
• components.fileinput.buttons.remove: rounded-l-none border-l
• components.fileinput.invalid => components.form.invalid
• components.fileinput.icons.select => components.icons.document-add
• components.fileinput.icons.remove => components.icons.trash
• components.fileinput.placeholder => text-gray-500

Password

Styling overrides

• components.password.icon.show => components.icons.eye-off
• components.password.icon.hide => components.icons.eye

Scoping style overrides

Style overrides can be scoped by using the Scope component, which takes an object defining what keys to override and optionally a scope to reduce repetition. See storybook and src/Scope/stories.tsx for examples.

Icons

The library comes with a few included icons, these can be changed to different SVG paths, or to entirely different icon sets by overriding the IconRenderer.

• components.icons.calendar: M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z
• components.icons.check: M 20.634 5.377 C 21.137 5.878 21.137 6.693 20.634 7.195 L 10.34 17.482 C 9.838 17.983 9.024 17.983 8.522 17.482 L 3.373 12.338 C 2.686 11.627 3.026 10.437 3.988 10.197 C 4.419 10.09 4.874 10.212 5.193 10.521 L 9.431 14.755 L 18.815 5.377 C 19.319 4.875 20.133 4.875 20.634 5.377 Z
• components.icons.chevron-down: M 19 9 C 20 8 19 7 18 8 L 12 14 L 6 8 C 5 7 4 8 5 9 L 12 16 Z
• components.icons.chevron-left: M 15 19 C 16 20 17 19 16 18 L 10 12 L 16 6 C 17 5 16 4 15 5 L 8 12 Z
• components.icons.chevron-right: M 9 19 C 8 20 7 19 8 18 L 14 12 L 8 6 C 7 5 8 4 9 5 L 16 12 Z
• components.icons.cross: M 5 4 C 4 3 3 4 4 5 L 11 12 L 4 19 C 3 20 4 21 5 20 L 12 13 L 19 20 C 20 21 21 20 20 19 L 13 12 L 20 5 C 21 4 20 3 19 4 L 12 11 Z
• components.icons.document-add: M9 13h6m-3-3v6m5 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z
• components.icons.eye: M15 12a3 3 0 11-6 0 3 3 0 016 0z M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z
• components.icons.eye-off: M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21
• components.icons.trash: M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16

Overriding the icon renderer can be done using the React Context API, the example below shows how you might integrate FontAwesome.

<IconRenderer render={icon => (<i className={`fa fa-${icon}`} />)}>
  {/* Your app comes here */}
</IconRenderer>

Notes

• Overriding styling to different input types that are normally hard to style e.g. checkboxes you are required to install the @tailwindcss/forms plugin into your project.

Hooks

We've got a few custom hooks used throughout our different projects, supported hooks:

• useLocalStorage

useLocalStorage

import useLocalStorage from "@devcake/react-components-library"

export default function Component() {
  const [isDarkTheme, setDarkTheme] = useLocalStorage('darkTheme', true)

  const toggleTheme = () => {
    setDarkTheme(!isDarkTheme)
  }

  return (
    <button onClick={toggleTheme}>
      {`The current theme is ${isDarkTheme ? `dark` : `light`}`}
    </button>
  )

}