https://github.com/bastkakrolot/rslot

A library for building clear UI structures for React
https://github.com/bastkakrolot/rslot

await promise react react-slot rslot slot

Last synced: about 1 month ago
JSON representation

A library for building clear UI structures for React

• Host: GitHub
• URL: https://github.com/bastkakrolot/rslot
• Owner: BastKakrolot
• License: mit
• Created: 2023-10-09T08:52:42.000Z (over 1 year ago)
• Default Branch: master
• Last Pushed: 2023-10-12T03:17:54.000Z (over 1 year ago)
• Last Synced: 2024-04-16T05:14:04.200Z (10 months ago)
• Topics: await, promise, react, react-slot, rslot, slot
• Language: TypeScript
• Homepage: https://rslot.blackcell.fun/
• Size: 492 KB
• Stars: 2
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        


rslot


一款为配合 React 构建清晰的 UI 结构的库

[![NPM version][npm-image]][npm-url] [![NPM downloads][download-image]][download-url] [![install size][npm-size]][npm-size-url]

[![ docs by dumi][dumi-url]](https://d.umijs.org/) [![Build With father][father-url]](https://github.com/umijs/father/)

[dumi-url]: https://img.shields.io/badge/docs%20by-dumi-blue

[father-url]: https://img.shields.io/badge/build%20with-father-028fe4.svg

[npm-image]: https://img.shields.io/npm/v/rslot.svg?style=flat-square&color=deepgreen&label=latest

[npm-url]: https://npmjs.org/package/rslot

[npm-size]: https://img.shields.io/bundlephobia/minzip/rslot?color=deepgreen&label=gizpped%20size&style=flat-square

[npm-size-url]: https://packagephobia.com/result?p=rslot

[download-image]: https://img.shields.io/npm/dm/rslot.svg?style=flat-square

[download-url]: https://npmjs.org/package/rslot



## Usage

### Slot & withSlot

```jsx

import { Slot, withSlot } from 'rslot';

const Template = withSlot((props) => {

  return (

    


      
变身

      

      

      

    

  );

});


export default () => {

  return (

    

      
我来组成身体

      
我来组成头部

      
我来组成脚部

    

  );

};

```


### Await

```jsx

import React, { useMemo } from 'react';

import { Button } from 'antd';

import { useBoolean } from 'ahooks';

import { Await } from 'rslot';

const getPromise = (bool) =>

  new Promise((resolve, reject) => {

    setTimeout(() => {

      bool ? resolve('success') : reject('error');

    }, 2000);

  });

export default function Demo() {

  const [bool, { toggle }] = useBoolean(true);

  const promise = useMemo(() => getPromise(bool), [bool]);

  return (

    <>

      toggle

      
status: {String(bool)}

      


        render: 

        loading}

          errorElement={(error) => {error}}

        >

          {(value) => {value}}

        

      

    >

  );

}

```


### 其他插件

#### 未完待续..

## Options

- [x] 默认插槽

- [x] 具名插槽

- [x] 作用域插槽

- [ ] .....

## LICENSE

MIT