https://github.com/yesmeck/react-with-hooks

[OUTDATED]Ponyfill for the React Hooks API (Support RN)
https://github.com/yesmeck/react-with-hooks

Last synced: about 2 months ago
JSON representation

[OUTDATED]Ponyfill for the React Hooks API (Support RN)

• Host: GitHub
• URL: https://github.com/yesmeck/react-with-hooks
• Owner: yesmeck
• License: mit
• Created: 2018-10-27T06:00:30.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2019-02-15T09:19:41.000Z (over 5 years ago)
• Last Synced: 2024-04-09T21:58:26.080Z (3 months ago)
• Language: JavaScript
• Homepage: https://codesandbox.io/s/olx6zp44n6
• Size: 120 KB
• Stars: 152
• Watchers: 6
• Forks: 11
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Lists

• awesome-react-hooks - react-with-hooks - Ponyfill for the proposed React Hooks API. (Extensions/Libraries)
• awesome-react-hooks - `react-with-hooks`
• awesome-react-hooks-cn - `react-with-hooks`
• awesome-react-hooks - `react-with-hooks`
• fucking-awesome-react-hooks - `react-with-hooks`
• awesome-react-hooks - `react-with-hooks`
• awesome-react-hooks - `react-with-hooks`

README

        
# react-with-hooks

[![Build Status](https://img.shields.io/travis/yesmeck/react-with-hooks.svg?style=flat-square)](https://travis-ci.org/yesmeck/react-with-hooks)

![codecov](https://img.shields.io/codecov/c/github/yesmeck/react-with-hooks.svg?style=flat-square)

Polyfill and ponyfill for the [React Hooks API](https://reactjs.org/docs/hooks-intro.html).

Works on React Native!

⚠️The code on master branch is still WIP.

## Install

```bash

$ npm i react-with-hooks --save

```

## Usage

You can use `react-with-hooks` as a polyfill; in this case, when you later transition to native React Hooks you will only need to remove the `import 'react-with-hooks/polyfill'` statement:

```javascript

import 'react-with-hooks/polyfill'; // import the polyfill in the entry of your application

import React, { useState, useEffect } from 'react';

const Counter = () => {

  const [ count, setCount ] = useState(0);

  useEffect(() => {

    document.title = "count is " + count;

  })

  return (

    


      {count}

       setCount(count + 1)}>+

       setCount(count - 1)}>-

    

  );

};

```


Alternatively, you can use this library as a ponyfill with the `withHooks` helper. In this case, you will have to refactor your code later when you transition to use native React Hooks.

```javascript

import React from 'react';

import withHooks, { useState, useEffect } from 'react-with-hooks';

const Counter = withHooks(() => {

  const [ count, setCount ] = useState(0);

  useEffect(() => {

    document.title = "count is " + count;

  })

  return (

    


      {count}

       setCount(count + 1)}>+

       setCount(count - 1)}>-

    

  );

});

```


[Live Demo](https://codesandbox.io/s/olx6zp44n6)

## API Reference

- Basic Hooks

  - [useState](https://reactjs.org/docs/hooks-reference.html#usestate)

  - [useEffect](https://reactjs.org/docs/hooks-reference.html#useeffect)

  - [useContext](https://reactjs.org/docs/hooks-reference.html#usecontext)

- Additional Hooks

  - [useReducer](https://reactjs.org/docs/hooks-reference.html#usereducer)

  - [useCallback](https://reactjs.org/docs/hooks-reference.html#usecallback)

  - [useMemo](https://reactjs.org/docs/hooks-reference.html#usememo)

  - [useRef](https://reactjs.org/docs/hooks-reference.html#useref)

  - [useImperativeHandle](https://reactjs.org/docs/hooks-reference.html#useimperativehandle)

  - [useLayoutEffect](https://reactjs.org/docs/hooks-reference.html#uselayouteffect)

## License

[MIT](./LICENSE)