GV

GeezerVison

The World Wide Web, restored to 800 pixels of glory.

Home|About|Gaming cabinet|Archives|How it works|Starter sites

On this site

  • Sign in
  • ActionsCI/CD and automation
  • CodespacesCloud development environments
  • All Features
  • Documentation
  • Training
  • Certifications
  • Build with Copilot
  • Customize Copilot
  • Integrations
  • Trending repos
  • GitHub Sponsors
  • Developer articles
  • Enterprises

This view

  • Original page
  • New address

GeezerVison is showing github.com — GitHub - JordanMartinez/purescript-react-basic-hooks: An implementation of React hooks on top of purescript-react-basic

BranchesTags
Open more actions menu
 
 

Latest commit

 

History

58 Commits
58 Commits

Folders and files

NameName
Last commit message
Last commit date
.circleci
.circleci
 
 
examples
examples
 
 
src/React/Basic
src/React/Basic
 
 
.editorconfig
.editorconfig
 
 
.gitignore
.gitignore
 
 
Makefile
Makefile
 
 
README.md
README.md
 
 
bower.json
bower.json
 
 

Repository files navigation

react-basic-hooks CircleCI

react-basic-hooks adds React hook support to react-basic!

Note: This API relies on recent React versions (>= 16.8.0). For more info on hooks, see React's documentation.

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

mkCounter :: Effect (ReactComponent {})
mkCounter = do
  component "Counter" \props -> React.do
    counter /\ setCounter <- useState 0

    pure
      $ R.button
        { onClick: handler_ do
            setCounter (_ + 1)
        , children:
            [ R.text $ "Increment: " <> show counter ]
        }

More examples:

  • Counter with an effect
  • Reducer/action-style
  • Controlled inputs
  • Components: Parent and Child
  • Refs to DOM nodes (and extracting hook logic from a component for reuse)
  • A Todo App (components, inputs, state)
  • Context (creating and consuming React context)
  • Aff helper (async state management)

About

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

Resources

Readme
Activity

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

Packages

Contributors

Languages

You are visitor 01402520 — GeezerVison does not store the pages you look up.
Best viewed with Netscape Navigator 4.7 or Internet Explorer 6 at 800×600. No cookies required.