Skip to content

joshdoesthis/react-ui

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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.

About

A simple UI library for React apps.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published