How to use React Hooks?

[barriehadfield]

React Hooks are becoming more prevalent and supported by React >16.8.0 onward.

After much experimentation, I have mot found a way to work with hooks using react-dart.

In the example below useHistory() is a hook in the latest version of ReactRouter.

import { useHistory } from "react-router-dom";

function HomeButton() {
  const history = useHistory();

  function handleClick() {
    history.push("/home");
  }

  return (
    <button type="button" onClick={handleClick}>
      Go home
    </button>
  );
}

How would it be possible to implement the code above using react-dart?

[aaronlademann-wf]

@barriehadfield hooks support (along with function component support) is coming in version 5.4.0 which we plan to release in the next week or so!

cc/ @greglittlefield-wf

[barriehadfield]

Fantastic news! Thank you. I will look out for that.

I have to congratulate you on a truly excellent library which has been a delight to discover and learn.

[aaronlademann-wf]

@barriehadfield thanks... if you think this is great... you'll love our over_react library even more! It builds atop this one to make the authoring experience much nicer...

[barriehadfield]

Hi @aaronlademann-wf do you have an idea when your 5.4.0 release is likely? Finding React hooks all over the place these days!

[Atom735]

Hello @aaronlademann-wf, where the Hooks API? How i can use it? I try to use Material-UI from dart-react, and i had a errors with use func makeStyles(). How i can use it?

[aaronlademann-wf]

@Atom735 the React hooks exposed by this library can be found here: https://github.com/cleandart/react-dart/blob/master/lib/hooks.dart

Trying to make use of makeStyles within the Mui library is a different animal altogether. That would require a JS interop layer to handle the css-in-js engine that the Mui JS components make use of.

The hooks in this library allow you to write React function components in Dart. They do not make it so that you can make use of hooks written in JS components.