Skip to content

Example with Externally Defined React Component? #96

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
srfoster opened this issue Jun 1, 2017 · 3 comments
Closed

Example with Externally Defined React Component? #96

srfoster opened this issue Jun 1, 2017 · 3 comments

Comments

@srfoster
Copy link

srfoster commented Jun 1, 2017

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
Copy link

coot commented Jun 3, 2017

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
Copy link
Author

srfoster commented Jun 8, 2017

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
Copy link

coot commented Jun 8, 2017

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.

ethul added a commit that referenced this issue Apr 14, 2018
Resolves #96
Resolves #105
Resolves #138
Resolves #139
ethul added a commit that referenced this issue Apr 14, 2018
Resolves #96
Resolves #105
Resolves #138
Resolves #139
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Development

No branches or pull requests

3 participants