😎 A react basic component library.
Install this library:
# npm
npm install rc-basic
# pnpm
pnpm add rc-basic- 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.
For example, with lists, a simple map is inefficient as it always maps the entire array.
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>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>Detailed changes for each release are documented in the CHANGELOG.
Copyright (c) 2022-present, ZiMing(Simon) Liu
