Example with Externally Defined React Component?

[srfoster]

Would it be possible to get a simple example of how to render an externally defined React component from PureScript (e.g. a component imported through the FFI)?

[coot]

Just use

createElement :: forall props. ReactClass props -> props -> Array ReactElement -> ReactElement

you will also need to define the type for props of that component e.g.

type FFIComponentProps = { key :: String }

foreign import ffiComponent:: ReactClass FFIComponentProps

and now you can render it with

createElement ffiComponent { key: "key" } []

[srfoster]

Thanks! I appreciate this. It helps a lot.

One related issue I'm also trying to get my head around is passing in a callback as a prop. Is there a way to pass in a function that the ffiComponent will call to change the state that Purescript is maintaining?

[coot]

Sure:

foreign import func :: forall a b. a -> b

type ComponentProps = { fn :: forall a b. a -> b }

componentSpec :: forall eff. ReactSpec Unit ComponentProps eff
componentSpec = spec unit renderFn
   where renderFn = ...

You'd likely have something else than Unit as a type of your react component state, that you will also use in the function type.