Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/kagchi/nextify
A Utilities components for ReactJS
https://github.com/kagchi/nextify
nextjs react reactjs solidjs
Last synced: 9 days ago
JSON representation
A Utilities components for ReactJS
- Host: GitHub
- URL: https://github.com/kagchi/nextify
- Owner: KagChi
- License: gpl-3.0
- Created: 2024-07-23T16:06:08.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2024-10-23T17:42:49.000Z (13 days ago)
- Last Synced: 2024-10-24T01:48:26.584Z (13 days ago)
- Topics: nextjs, react, reactjs, solidjs
- Language: TypeScript
- Homepage:
- Size: 117 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# @kagchi/nextify
**A Utilities components for ReactJS**
[](https://github.com/KagChi/nextify/blob/main/LICENSE)
[](https://kagchi.my.id)
## Conditionals Rendering
Conditional rendering is the process of displaying different UI elements based on certain conditions. This is a common pattern in UI development, and is often used to show or hide elements based on user input, data, or other conditions.
## Show Conditional
`` renders its children when a condition is evaluated to be true. Similar to the ternary operator in JavaScript, it uses control logic flow within JSX to determine what to render
```ts
import { Show } from "@kagchi/nextify"
Loading...
```
`` has the fallback property that can be used to specify the content to be rendered when the condition evaluates to false. This property can return a JSX element.
```ts
import { Show } from "@kagchi/nextify"
Loading...}>
Hi, I am {data().name}.
```
## Switch and Match Conditional
Similar to JavaScript's switch/case structure, `` wraps multiple `` components so that each condition is evaluated in sequence. The first `` component that evaluates to true will have its children rendered, and the rest will be ignored.
```ts
import { Switch, Match } from "@kagchi/nextify"
Outcome 1
Outcome 2
```
Similar to ``, each `` component has a when property that is used to determine whether or not to render its children. An optional fallback property can also be passed to `` to specify the content be rendered when none of the `` components evaluate to true.
```ts
import { Switch, Match } from "@kagchi/nextify"
Fallback content}>
Outcome 1
Outcome 2
```
## List Rendering
List rendering allows you to generate multiple elements from a collection of data, such as an array or object, where each element corresponds to an item in the collection.
### For
`` is a looping component that allows you to render elements based on the contents of an array or object. This component is designed to be used with complex data structures, such as arrays of objects, where the order and length of the list may change frequently.
The sole property in `` is each , through which you can specify the data collection to loop over. This property expects an array, however, it can also accept objects that have been converted to arrays using utilities such as Object.entries or Object.values.
```ts
import { For } from "@kagchi/nextify"
{(item, index) =>
// rendering logic for each element
}
```
### References
- [SolidJS Conditional Rendering](https://docs.solidjs.com/concepts/control-flow/conditional-rendering)
- [SolidJS List Rendering](https://docs.solidjs.com/concepts/control-flow/list-rendering)