Hydro

Hydro is a set of general, fluid React components. It's like mini UI kit.

Links

• Live demo
• Sandbox link

To learn how to use Hydro, read the wiki.

Installation

yarn add @infinium/hydro

or

npm install @infinium/hydro

Usage

First, import the global stylesheet:

import '@infinium/hydro/dist/style.css';

Now, just import any component as you need it.

import { Button } from '@infinium/hydro';

const App = () => (
	<Button>Click me</Button>
);

Features

• Built-in, working components by default.
• Excellent conformity to accessibility. Every component, within reason, is usable directly from the keyboard.
• Standard keyboard events are on by default. For instance, using esc to close a Modal.
• Beautiful (in our opinion) default styles, with excellent support for altering the variants, etc. of each component.
• Excellent, usable defaults

Components

All of the components are written in TypeScript. Moreover, each of the component prop types are exported individually. If you want to extract the props to an object, you can do so like:

import type { TButton } from '@infinium/hydro';

const buttonProps: TButton = {
	// ...
}

If you're not using TypeScript, you can read the wiki to learn about each component.