https://github.com/fcodelabs/react-helper-hooks

A Custom Set of Helper Hooks written in Typescript to Make Your Life Easier.
https://github.com/fcodelabs/react-helper-hooks

hooks react react-hooks reactjs

Last synced: 4 days ago
JSON representation

A Custom Set of Helper Hooks written in Typescript to Make Your Life Easier.

• Host: GitHub
• URL: https://github.com/fcodelabs/react-helper-hooks
• Owner: fcodelabs
• License: mit
• Created: 2022-10-26T16:28:36.000Z (about 2 years ago)
• Default Branch: main
• Last Pushed: 2022-10-30T11:00:04.000Z (about 2 years ago)
• Last Synced: 2024-11-06T05:16:28.276Z (about 2 months ago)
• Topics: hooks, react, react-hooks, reactjs
• Language: TypeScript
• Homepage:
• Size: 171 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        

# @fcodelabs/react-helper-hooks

A Custom Set of Helper Hooks written in Typescript to Make Your Life Easier.

## Demo

See working Demo [Here](https://fcodelabs.github.io/react-helper-hooks)

## Installation

Install with npm

```bash

  npm install @fcodelabs/react-helper-hooks

```

Install with yarn

```bash

  yarn add @fcodelabs/react-helper-hooks

```

## List of Hooks

- [useWindowSize](#useWindowSize) - Get current window size and device type (Desktop or Mobile) based on your breakpoint

- [useLocalStorage](#useLocalStorage) - Sync your state with browser localStorage. Works same as the `useState` hook. Automatically sync with localStorage value changes.



### useWindowSize

This hook is useful when you want to get the window size as height and width.

**It takes one argument**

- `breakpoint: number `

Breakpoint for mobile in pixels

```

const { windowSize, isDesktop } = useWindowSize(1024);

```

#### windowSize

```

const { windowSize } = useWindowSize(1024);

// {width: 1368, height: 1024}

```

#### isDesktop

```

const { isDesktop } = useWindowSize(1024);

# If window size less than 1024

// false

# If window size greater than 1024

// true

```



### useLocalStorage

This hook is useful when you want to use localStorage as your state. It works same almost same as `useState` hook, which means it will sync the localstorage value changes automatically.

**It takes two arguments**

- `key: string`

LocalStorage key (This will be the key that your state will be saved)

- `initialState: any`

Initial state value. It could be in any of data type such as `string`, `number`, `boolean`, `object`, `array` or `custom interfaces`.

```

## Javascript

const [ count, setCount ] = useLocalStorage('count', 0);

```

```

## Typescript

const [ count, setCount ] = useLocalStorage('count', 0);

```

## Support

If you find any bugs please report an issue, so it can be fixed. If you have any suggestions that would improve the hooks, please let us know. Feel free to contribute in any way!

**We hope this package can be useful for you in someway.**