Skip to content
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

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 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
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! :)

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

No branches or pull requests

3 participants