rc-basic
v1.2.0
Published
๐ A react basic component library.
Downloads
132
Readme
RC Basic
๐ A react basic component library.
Table of Contents
Usage
Install this library:
# npm
npm install rc-basic
# pnpm
pnpm add rc-basic
Components
Basic
<Box>
- Static type checking against the associated component's inferred props
- HTML element name validation
<Box as="a" href="xxx.com">xxx.com</Box>
<Box as="h3">h3</Box>
For more usage, please see react-polymorphed.
Control Flow
For example, with lists, a simple map is inefficient as it always maps the entire array.
<For>
Simple referentially keyed loop. The callback takes the current item as the first argument:
<For each={state.list} fallback={<div>Loading...</div>}>
{(item) => <div>{item}</div>}
</For>
The optional second argument is an index signal:
<For each={state.list} fallback={<div>Loading...</div>}>
{(item, index) => (
<div>
#{index()} {item}
</div>
)}
</For>
<Show>
The Show
control flow is used to conditional render part of the view: it renders children when the when is truthy, an fallback otherwise. It is similar to the ternary operator (when ? children : fallback) but is ideal for templating JSX.
<Show when={state.count > 0} fallback={<div>Loading...</div>}>
<div>My Content</div>
</Show>
Show
can also be used as a way of keying blocks to a specific data model. Ex the function is re-executed whenever the user model is replaced.
<Show when={state.user} fallback={<div>Loading...</div>}>
{(user) => <div>{user.firstName}</div>}
</Show>
Changelog
Detailed changes for each release are documented in the CHANGELOG.
License
Copyright (c) 2022-present, ZiMing(Simon) Liu