https://github.com/purescript-react/purescript-react-basic-hooks

An implementation of React hooks on top of purescript-react-basic
https://github.com/purescript-react/purescript-react-basic-hooks

Last synced: 2 days ago
JSON representation

An implementation of React hooks on top of purescript-react-basic

• Host: GitHub
• URL: https://github.com/purescript-react/purescript-react-basic-hooks
• Owner: purescript-react
• License: apache-2.0
• Created: 2019-01-15T07:49:50.000Z (almost 6 years ago)
• Default Branch: main
• Last Pushed: 2024-04-11T07:54:13.000Z (7 months ago)
• Last Synced: 2024-05-19T05:01:26.829Z (6 months ago)
• Language: PureScript
• Homepage: https://pursuit.purescript.org/packages/purescript-react-basic-hooks/
• Size: 537 KB
• Stars: 198
• Watchers: 7
• Forks: 31
• Open Issues: 9
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-purescript - react-basic-hooks - React hook API for react-basic. (UI / React)

README

        
# react-basic-hooks [![Build Status](https://github.com/spicydonuts/purescript-react-basic-hooks/actions/workflows/node.js.yml/badge.svg)](https://github.com/spicydonuts/purescript-react-basic-hooks/actions/workflows/node.js.yml)

`react-basic-hooks` is a React hook API for [react-basic](https://github.com/lumihq/purescript-react-basic).

_Note:_ This API relies on React `>=16.8.0`. For more info on hooks, see [React's documentation](https://reactjs.org/docs/hooks-intro.html).

I recommend using PureScript's "qualified do" syntax while using this library (it's used in the examples, the `React.do` bits).

It became available in the `0.12.2` compiler release.

This library provides the `React.Basic.Hooks` module, which can completely replace the `React.Basic` module.

It borrows a few types from the current `React.Basic` module like `ReactComponent` and `JSX` to make it easy to use both versions in the same project.

If we prefer this API over the existing react-basic API, we may eventually replace `React.Basic` with this implementation.

## Example

```purs

mkCounter :: Component Int

mkCounter = do

  component "Counter" \initialValue -> React.do

    counter /\ setCounter <- useState initialValue

    pure

      $ R.button

          { onClick: handler_ do

              setCounter (_ + 1)

          , children:

              [ R.text $ "Increment: " <> show counter ]

          }

```