Skip to content
New issue

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

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

Already on GitHub? # to your account

Docs suggestion: FFI import class with custom props #61

Open
ntwilson opened this issue Feb 27, 2021 · 3 comments
Open

Docs suggestion: FFI import class with custom props #61

ntwilson opened this issue Feb 27, 2021 · 3 comments

Comments

@ntwilson
Copy link

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

A bit of a late reply, but here is how I did a custom prop ffi for an ant de#put 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
Copy link
Author

ntwilson commented Jul 6, 2021

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

@ajnsit
Copy link
Member

ajnsit commented Jul 7, 2021

@ntwilson doc improvement PRs are always welcome! :)

# for free to join this conversation on GitHub. Already have an account? # to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants