https://github.com/marcolink/react-sink

A classy kitchen sink for all react pieces daily used - not the ordinary.
https://github.com/marcolink/react-sink

Last synced: 2 months ago
JSON representation

A classy kitchen sink for all react pieces daily used - not the ordinary.

• Host: GitHub
• URL: https://github.com/marcolink/react-sink
• Owner: marcolink
• Created: 2023-02-21T22:46:21.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2024-05-13T04:07:08.000Z (7 months ago)
• Last Synced: 2024-10-05T17:16:11.749Z (3 months ago)
• Language: TypeScript
• Homepage:
• Size: 192 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 10
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# react sink

A classy kitchen sink for all react pieces daily used - not the ordinary.

[![Version](https://img.shields.io/npm/v/react-sink.svg)](https://npmjs.org/package/react-sink)

[![Downloads/week](https://img.shields.io/npm/dw/react-sink.svg)](https://npmjs.org/package/react-sink)

[![Size](https://img.shields.io/bundlephobia/min/react-sink.svg)](https://npmjs.org/package/react-sink)

[![Semantic Release](https://github.com/marcolink/react-sink/actions/workflows/semantic-release.yml/badge.svg)](https://github.com/marcolink/react-sink/actions/workflows/semantic-release.yml)

### Install

**yarn**

```

yarn add react-sink

```

**npm**

```

npm i react-sink

```

## Components

### ``

```typescript jsx

import { Conditional } from 'react-sink'

function MyComponent({ isLoading, isError }) {

    return (

        

            rendered when complete

        

    )

}

```

### ``

```typescript jsx

import { Conditional } from 'react-sink'

function MyComponent({ flag }) {

    return (

        

            rendered when true

        

    )

}

```

### ``

```typescript jsx

import {ConditionalWrapper} from 'react-sink'

function MyComponent({flag}) {

    return (

         
{children}
}>

            rendered for truthy condition

        

    )

}

```


## Hooks

### `useAllBoolean`

```typescript jsx

import { useAllBoolean } from 'react-sink'

function MyComponent() {

    const expectAllTrueWillBeFalse = useAllBoolean({ hello: true, world: false })

    const expectAllTrueWillBeTrue = useAllBoolean({ hello: true, world: true })

    const expectAllFalseWillBeFalse = useAllBoolean({ hello: false, world: false }, false)

}

```

### `usePeriodicCallback`

```typescript jsx

import {useCallback} from "react";

import {usePeriodicCallback} from 'react-sink'

function MyComponent() {

    const callback = useCallback(()=> console.log("called!"), [])

    const result = usePeriodicCallback(callback, 100)

}

```

### `useWindowSize`

```typescript jsx

import {useWindowSize} from 'react-sink'

function MyComponent() {

    const { width, height } = useWindowSize()

}

```

### `useAbortOnUnmount`

```typescript jsx

import {useAbortOnUnmount} from 'react-sink'

function MyComponent() {

    const abortSignal = useAbortOnUnmount()

}

```