Halogen and React Interop

charlescrain · January 27, 2019, 1:38pm

Hey everyone!

I’ve been experimenting with halogen the past few days and really enjoying it. It was quite straight forward to integrate with an existing react-app which is what I’m hoping to do with my company’s site.

It would be awesome (and save a lot of time) to reuse some of the react component packages we currently use, such as https://www.npmjs.com/package/react-infinite-scroll-component.

I feel it should be possible to wrap the react component in a halogen component, (i.e. make the appropriate query algebra/ message to for my halogen app to interact with it), but am unsure of where to start.

Any feedback or guidance would be much appreciated!

Thanks to all!

Charles

safareli · January 27, 2019, 5:05pm

Here is example of wrapping react component in hallogen. Aff.Bus is used for comunicating with instance of the react component

github.com

f-o-a-m/purescript-react-map-gl/blob/master/example/map-halogen/src/MapComponent.purs

module MapComponent
  ( MapQuery(SetViewport, AskViewport)
  , MapProps
  , MapMessages(..)
  , mapComponent
  ) where

import Prelude

import Control.Lazy (fix)
import Data.Int (toNumber)
import Data.Maybe (Maybe(..))
import Data.Newtype (un)
import Data.Tuple (snd)
import Effect.Aff (error, launchAff_)
import Effect.Aff.AVar (AVar)
import Effect.Aff.AVar as AVar
import Effect.Aff.Bus as Bus
import Effect.Aff.Class (class MonadAff, liftAff)
import Effect.Uncurried (mkEffectFn1)

This file has been truncated. show original

charlescrain · January 27, 2019, 6:07pm

Thanks so much this is exactly what I’m looking for, I owe you a beer!