purescript-concur / purescript-concur-react

Concur UI Framework for Purescript
https://purescript-concur.github.io/purescript-concur-react
MIT License
269 stars 17 forks source link

Docs suggestion: FFI import class with custom props #61

Open ntwilson opened 3 years ago

ntwilson commented 3 years ago

In the README for this repo it showcases using FFI to import a react class, but the class being imported just uses the default props which are already defined by Concur.React.Props. I'm curious how to import a class that uses some custom props (for example, React Datepicker which has all sorts of other props like onChange :: JSDate -> Effect Unit and minDate :: JSDate that one wouldn't find in Concur.React.Props). How would one go about defining FFI for something like that? Maybe that could be included in the docs somewhere? I feel like importing React classes that have custom props is a pretty common use case.

ajbarber commented 3 years ago

A bit of a late reply, but here is how I did a custom prop ffi for an ant design input box, which has a custom prop suffix which takes a JSX argument and renders it on the right hand side inside the input.

input :: El
input = el' (unsafeCreateElement _input <<< unsafeFromPropsArray)

suffix :: forall a. ReactElement -> ReactProps a
suffix = PrimProp <<< unsafeMkProps "suffix"

Then just go ahead and use suffix like a normal prop in the props array.

ntwilson commented 3 years ago

Thanks for the tip! Would a PR be welcome that adds something to the docs for how to define your own custom props?

ajnsit commented 3 years ago

@ntwilson doc improvement PRs are always welcome! :)