https://github.com/lzm0x219/rc-basic

😎 A react basic component library.
https://github.com/lzm0x219/rc-basic

react react-component

Last synced: about 1 month ago
JSON representation

😎 A react basic component library.

• Host: GitHub
• URL: https://github.com/lzm0x219/rc-basic
• Owner: lzm0x219
• License: mit
• Created: 2022-06-13T07:16:41.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2024-10-11T16:55:02.000Z (2 months ago)
• Last Synced: 2024-10-14T05:32:12.081Z (2 months ago)
• Topics: react, react-component
• Language: TypeScript
• Homepage:
• Size: 923 KB
• Stars: 2
• Watchers: 1
• Forks: 1
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# RC Basic

[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier) [![npm](https://img.shields.io/npm/v/rc-basic?style=flat-square)](https://www.npmjs.com/package/rc-basic) ![npm](https://img.shields.io/npm/dm/rc-basic?color=yellow&style=flat-square) ![NPM](https://img.shields.io/npm/l/rc-basic?style=flat-square)

😎 A react basic component library.

## Table of Contents

- [Usage](#usage)

- [Components](#components)

  - [Basic](#basic)

    - [Box]()

  - [Control Flow](#control-flow)

    - [For]()

    - [Show]()

- [License](#License)

## Usage

Install this library:

```bash

# npm

npm install rc-basic

# pnpm

pnpm add rc-basic

```

## Components

### Basic

#### \

- Static type checking against the associated component's inferred props

- HTML element name validation

```js

xxx.com

h3

```

For more usage, please see [react-polymorphed](https://github.com/nasheomirro/react-polymorphed).

---

### Control Flow

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:

```js

Loading...}>

  {(item) => 
{item}
}


```

The optional second argument is an index signal:

```js

Loading...}>

  {(item, index) => (

    


      #{index()} {item}

    

  )}


```

#### \

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.

```js

 0} fallback={
Loading...
}>

  
My Content


```

`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.

```js

Loading...}>

  {(user) => 
{user.firstName}
}


```

## Changelog

Detailed changes for each release are documented in the [CHANGELOG](https://github.com/lzm0x219/rc-basic/blob/main/CHANGELOG.md).

## License

[MIT](https://github.com/lzm0x219/rc-basic/blob/main/LICENSE)

Copyright (c) 2022-present, ZiMing(Simon) Liu

[![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2F0x219%2Frc-basic.svg?type=large)](https://app.fossa.com/projects/git%2Bgithub.com%2F0x219%2Frc-basic?ref=badge_large)