React UI

A simple UI library for React apps.

Installation

Using npm:

$ npm i @joshdoesthis/react-ui

Using yarn:

$ yarn add @joshdoesthis/react-ui

Usage

Theme is required in the top-level of the app as it initialises tailwind and provides context to components.

import { Theme, Box, Text, Button } from '@joshdoesthis/react-ui'

const App = () => {
  const [count, setCount] = useState(0)

  const increment = () => {
    setCount(() => count + 1)
  }

  return (
    <Theme>
      <Box>
        <Text h1>React UI</Text>
        <Text p>A simple UI library for React apps.</Text>
        <Text p>Count: {count}</Text>
        <Button press={increment}>Click me!</Button>
      </Box>
    </Theme>
  )
}

Theme

| Prop | Type | Description | | ------- | -------- | --------------------- | | theme | object | The theme of the app. |

Box

| Prop | Type | Description | | ------------ | -------- | ----------------------------------------- | | forwardRef | object | A ref to the underlying HTML element. | | style | string | Any tailwind classes to apply to the Box. |

Button

| Prop | Type | Description | | ------------ | ---------- | ----------------------------------------------------------- | | forwardRef | object | A ref to the underlying HTML element. | | name | string | The name of the button for accessibility purposes. | | active | boolean | Whether or not the Button is active. Defaults to false. | | disabled | boolean | Whether or not the Button is disabled. Defaults to false. | | style | string | Any tailwind classes to apply to the Button. | | press | function | A function to call when the Button is pressed. |

Cassette

| Prop | Type | Description | | ----------------- | ---------- | ------------------------------------------------------------------------ | | defaultValue | string | The default value of the Cassette. | | options | array | An array of options to display in the Cassette. | | change | function | A function to call when the Cassette's value changes. | | OptionComponent | function | A component to render each option. Defaults to DefaultOptionComponent. |

OptionComponent

| Prop | Type | Description | | -------- | ---------- | ------------------------------------------------------------------------------- | | name | string | The name of the option. | | value | string | The value of the option. | | active | boolean | Whether or not the option is active. Defaults to false. | | select | function | A function to call when the option is selected. References Cassette's change. |

Drawer

| Prop | Type | Description | | -------------- | ---------- | ---------------------------------------------------------------------------------- | | visible | boolean | Whether or not the Drawer is visible. Defaults to false. | | close | function | A function to call when the Drawer is closed. | | style | string | Any tailwind classes to apply to the Drawer. | | TopComponent | function | A component to render at the top of the Drawer. Defaults to DefaultTopComponent. |

TopComponent

| Prop | Type | Description | | ------- | ---------- | -------------------------------------------------------------------------- | | close | function | A function to call when the Drawer is closed. References Drawer's close. |

Input

| Prop | Type | Description | | -------------- | ---------- | -------------------------------------------------------------------------- | | id | string | The id of the Input. | | type | string | The type of the Input. Defaults to text. | | name | string | The name of the Input. | | defaultValue | string | The default value of the Input. | | ok | boolean | Whether or not the Input is ok. Defaults to true. | | style | string | Any tailwind classes to apply to the Input. | | blur | function | A function to call when the Input is blurred. References Input's change. | | change | function | A function to call when the Input's value changes. |

Markdown

| Prop | Type | Description | | ---------- | -------- | ----------------------- | | children | string | The markdown to render. |

Passcode

| Prop | Type | Description | | -------- | ---------- | ------------------------------------------------------ | | ok | boolean | Whether or not the Passcode is ok. Defaults to true. | | change | function | A function to call when the Passcode's value changes. |

Select

| Prop | Type | Description | | ----------------- | ---------- | ------------------------------------------------------------------------ | | defaultValue | string | The default value of the Select. | | options | array | An array of options to display in the Select. | | OptionComponent | function | A component to render each option. Defaults to DefaultOptionComponent. | | change | function | A function to call when the Select's value changes. |

OptionComponent

| Prop | Type | Description | | -------- | ---------- | ----------------------------------------------------------------------------- | | name | string | The name of the option. | | value | string | The value of the option. | | active | boolean | Whether or not the option is active. Defaults to false. | | select | function | A function to call when the option is selected. References Select's change. |

Text

| Prop | Type | Description | | -------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | ---------------------------------------------------------------------------------------- | | children | string | The text to render. | | style | string | Any tailwind classes to apply to the text. | | b, strong, i, em, mark, small, del, ins, sub, sup, span, q, blockquote, abbr, address, cite, bdo, ul, ol, li, h1, h2, h3, h4, h5, h6, p, br, pre | boolean | Whether or not to render the text as the corresponding HTML element. Defaults to span. |

DateTime

| Prop | Type | Description | | -------- | ---------- | ------------------------------------------------- | | change | function | A function to call when DateTime's value changes. |

DarkMode

| Prop | Type | Description | | ----------------- | ---------- | ------------------------------------------------------------------------------------------ | | defaultMode | enum | The default mode of the DarkMode. Options are auto, light, dark. Defaults to auto. | | SwitchComponent | function | A component to render the Switch. Defaults to DefaultSwitchComponent. |

SwitchComponent

| Prop | Type | Description | | ------- | ---------- | ------------------------------------------- | | mode | enum | The current mode of the DarkMode. | | cycle | function | A function to call when the mode is cycled. |