A tiny package that contains a few UI components written in and for React. Demo can be found here
npm install @stein197/react-ui
Then add index.css
to your stylesheet:
@import "@stein197/react-ui/index";
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} />
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) |
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>
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 |
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>
Name | Type | Description |
---|---|---|
value |
any |
Value to test |
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>
Name | Type | Description |
---|---|---|
value |
boolean |
Value to test |
Replacement for items.map(...)
construction
<Foreach items={["First", "Second", "Third"]}>
{(item, index) => (
<p key={index}>item: {item}, index: {index}</p>
)}
</Foreach>
Name | Type | Description |
---|---|---|
data |
T[] |
Data to walk through |
children |
(item: T, index: number) => React.ReactNode |
Callback to be called per every item |
For-loop as a react component
<For from="1" to="3">
{i => (
<p key={i}>index: {i}</p>
)}
</For>
Name | Type | Description |
---|---|---|
from |
`number | `${number}`` |
to |
`number | `${number}`` |
children |
(index: number) => React.ReactNode |
Callback to be called per every loop |
Animated circle spinner component
<Spinner r="50" />
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 |
NOTE: More detailed documentation can be found in TSDoc blocks in source code.
clean
clean the directory out of compiled filesbuild
compile source codetest
run unit tests
Info to build and run demo can be found here