How do you convert this JSX to Hyperstack?

Question

How would you convert this JSX into a Hyperstack Component?

const Stopwatch = () => (
  <ReactStopwatch
    seconds={0}
    minutes={0}
    hours={0}
    limit="00:00:10"
    onChange={({ hours, minutes, seconds }) => {
      // do something
    }}
    onCallback={() => console.log('Finish')}
    render={({ formatted, hours, minutes, seconds }) => {
      return (
        <div>
          <p>
            Formatted: { formatted }
          </p>
          <p>
            Hours: { hours }
          </p>
          <p>
            Minutes: { minutes }
          </p>
          <p>
            Seconds: { seconds }
          </p>
        </div>
      );
    }}
   />
);

This syntax render={({ formatted, hours, minutes, seconds }) is new to me. Are these props?

I am trying to use this NPM module:

https://www.npmjs.com/package/react-stopwatch

Cereal · Accepted Answer · 2019-05-06T18:50:50.207

The render prop renders a functional component. A functional component is a function, such that the arguments are props, and the return value is the component to be rendered.

Therefor, we need to convert your render prop to opal.

    DIV do
      P { "Formatted: #{native_props.formatted}" }
      P { "Hours: #{native_props.hours}" }
      P { "Minutes: #{native_props.minutes}" }
      P { "Seconds: #{native_props.seconds}" }
    end.to_n

There's one gotcha here. The first is that props is being passed as a javascript object. We need that to be ruby, so we wrap it in Native.

Step two is exposing the stopwatch class to Hyperstack.

Under app/javascript/packs, edit hyperstack.js to include react-stopwatch.

import ReactStopwatch from 'react-stopwatch';
global.ReactStopwatch = ReactStopwatch;

Now you can use Stopwatch in your code.

Putting this together, you get:

class Stopwatch < HyperComponent
  render do
    ReactStopwatch(seconds: 0, minutes: 0, hours: 0, limit: "00:00:10").on("<render>") do |props|
      DIV do
        P { "Formatted: #{props.formatted}" }
        P { "Hours: #{props.hours}" }
        P { "Minutes: #{props.minutes}" }
        P { "Seconds: #{props.seconds}" }
      end.to_n
    end
  end
end

You should also be able to attach the render call back using the `.on` modifier: `ReactStopwatch(...).on('') do |props| ... end` it just gets rid of the extra nesting level. Note that because its not called `onRender` we have to use the escape syntax of `<...>` — Mitch VanDuyn, May 06 '19 at 18:41
@MitchVanDuyn Interesting, it also gets rid of the `Native` wrapper. Is `on("")` mentioned in the docs somewhere? I knew about the event handler, not for non-events — Cereal, May 06 '19 at 18:49

How do you convert this JSX to Hyperstack?

1 Answers1