React UI
A tiny package that contains a few UI components written in and for React. Demo can be found here
Installation
npm install @stein197/react-ui
Then add index.css to your stylesheet:
@import "@stein197/react-ui/index";Components
Dropdown
Simple dropdown component. Works the same as plain <select /> element except that this dropdown can be stylized. The dropdown offers a search functionality by which items can be filtered out. Throws an error if defaultValue is not contained in data.
import React from "react";
import Dropdown from "@stein197/react-ui/Dropdown";
const data = [
"First",
"Second",
"Third"
];
<Dropdown defaultValue="First" placeholder="Select a place" data={data} onChange={console.log} editable={false} />Options
| Name | Type | Description |
|---|---|---|
data |
string[] |
List of items for dropdown to show |
name |
?string |
Name of the inner input |
enabled |
?boolean |
Enable or disable dropdown input. true by default |
required |
?boolean |
Make the input required. false by default |
editable |
?boolean |
Make input editable in order to allow searching among items. true by default |
placeholder |
?string |
Text to be shown as a placeholder for the input |
defaultValue |
?string |
Default value. Should be the one of the values included in data
|
className |
?string |
CSS class |
onChange |
(value: string, state: "valid" | "invalid" | "match" | "empty") => void |
Fires each time input changes it's value (typing or selecting values from dropdown) |
Async
Renders its children only when the promise is resolved.
import React from "react";
import Async from "@stein197/react-ui/Async";
<Async promise={new Promise(resolve => setTimeout(resolve, 1000))} fallback={reason => <p>Rejected! Reason: {reason}</p>} stub={<p>Pending...</p>}>
{result => (
<p>Resolved! Result: {result}</p>
)}
</Async>Options
| Name | Type | Description |
|---|---|---|
promise |
Promise<T> |
Promise to wait for resolving |
children |
((result: T) => React.ReactNode) | React.ReactNode |
Content to render after the promise is resolved |
fallback |
?((reason: U) => React.ReactNode) | React.ReactNode |
Content to render in case of rejected promise |
stub |
?React.ReactNode |
Content to render while promise is pending |
Switch, Case, Default
Component for implementing switch-case-default clause but in JSX. The usage is the same as the usage of ordinary switch statement.
import React from "react";
import {Switch, Case, Default} from "@stein197/react-ui/Switch";
<Switch value="2">
<Case value="1">First</Case>
<Case value="2">Second</Case>
<Case value="3">Third</Case>
<Default>None</Default>
</Switch>Options
| Name | Type | Description |
|---|---|---|
value |
any |
Value to test |
If, Then, Else
Component for conditional rendering, instead of using JS operators
import React from "react";
import {If, Then, Else} from "@stein197/react-ui/If";
<If value={false}>
<Then>yes</Then>
<Else>no</Else>
</If>Options
| Name | Type | Description |
|---|---|---|
value |
boolean |
Value to test |
Foreach
Replacement for items.map(...) construction
<Foreach items={["First", "Second", "Third"]}>
{(item, index) => (
<p key={index}>item: {item}, index: {index}</p>
)}
</Foreach>Options
| Name | Type | Description |
|---|---|---|
data |
T[] |
Data to walk through |
children |
(item: T, index: number) => React.ReactNode |
Callback to be called per every item |
For
For-loop as a react component
<For from="1" to="3">
{i => (
<p key={i}>index: {i}</p>
)}
</For>Options
| Name | Type | Description |
|---|---|---|
from |
`number | `${number}`` |
to |
`number | `${number}`` |
children |
(index: number) => React.ReactNode |
Callback to be called per every loop |
Spinner
Animated circle spinner component
<Spinner r="50" />options
| Name | Type | Description |
|---|---|---|
r |
number |
Radius of the circle |
strokeWidth |
number |
Width of the circle's stroke |
strokeColor |
string |
Color of the circle's stroke |
bgStrokeColor |
string |
Color of the background ring stroke |
roundLinecap |
boolean |
Makes linecaps round for circle |
length |
number |
Length of the segment. Accepts values from 0 to 1 |
duration |
number |
Duration of one loop of animation in seconds |
clockwise |
boolean |
Direction in which to spin the circle |
className |
string |
Additional CSS classname |
Hooks
useAsync
useToggle
usePrev
useCounter
useHover
useResize
useFocus
useOnline
useImage
NOTE: More detailed documentation can be found in TSDoc blocks in source code.
NPM scripts
-
cleanclean the directory out of compiled files -
buildcompile source code -
testrun unit tests
Demo
Info to build and run demo can be found here