Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/kalcifer/react-powerhooks

Hooks api for react-powerplug components
https://github.com/kalcifer/react-powerhooks

Last synced: 3 months ago
JSON representation

Hooks api for react-powerplug components

Lists

README 

        


  React PowerHooks

   react-powerhooks 








> ⚠️ Warning: hooks are not part of a stable React release yet, so use this library only for experiments



### Demo



[![Edit react-powerhooks example](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/j31y1l90m3)



### Install



```bash

yarn add react-powerhooks

```



### About



`react-powerhooks` is a set of [react custom-hooks](https://reactjs.org/docs/hooks-custom.html) equivalent to the render props components in [`react-powerplug`](https://github.com/renatorib/react-powerplug)

Heavily inspired by [`react-hangers`](https://github.com/kitze/react-hanger)

The logo is from [wikimedia commons](https://commons.wikimedia.org/wiki/File:OCR_hook.svg)



### API



#### useToggle



This is a hook that lets you toggle between boolean values.

It needs an `initialValue` to work with.



_Usage_



```jsx

const initialValue = true;

const [currentValue, toggleAway] = useToggle(initialValue);

```



#### useActive



This hook lets you know when your mouse pointer is active on a particular element.

It needs a `ref` of the element in question to work with. It can also take an `onChange` callback which it calls everytime the active state changes. The `onChange` function recieves the current active state of the element as a boolean value.



_Usage_



```jsx

const ref = useRef(null); // Use the ref in the element concerned.

// More about useRef here https://reactjs.org/docs/hooks-reference.html#useref

const activeValue = useActive({ refEl: ref });

```



#### useInterval



This hook starts an interval timer that can be stopped/resumed any time.

It takes in `startImmediate` which decides whether the interval is on by default.

It also takes a `time` which is the interval duration.



It provides a `start` and `stop` method which allow us to control the state of the interval.



_Usage_



```jsx

const [time, setTime] = useState(null);

const { start, stop } = useInterval({

  duration: 1000,

  startImmediate: false,

  callback: () => {

    setTime(new Date().toLocaleTimeString());

  }

});



return (

  

    
The time is now {time}


     stop()}>Stop interval

     start()}>Start interval

  

);

```



#### useMap



This hook allows you to use a map object and get methods to manipulate the map.

Takes an `initialValue`



_Usage_



```jsx

const {

  set: setKey,

  get: getKey,

  has,

  delete: deleteKey,

  clear,

  reset,

  values

} = useMap({ name: "PK", age: "30", occupation: "Reactor" });

```