Support providing our own Input component

[mquandalle]

Hello,

I would be interested in an additional Prop for the NumberFormat component, that would allow the user to provide its own Input component implementation. This functional composition pattern would permit, among other thing, the integration of NumberFormat logic with existing input components like http://react-toolbox.com/#/components/input and many others

import MaterialDesignInput from 'react-toolbox/lib/input';

<NumberFormat inputComponent={MaterialDesignInput} />

Any though on that?

[s-yadav]

This can be little tricky as this will assume the custom input has onChange, onInput, onKeyDown.
But yes we can ask user to provide that if its not there.

[mquandalle]

For Flow types of Typescript users, it is possible to statically enforce that the inputComponent parameter must have all required attributes and methods. For vanilla JS/ES6 users, we'll need to specify that in the documentation, but for the use case above, which is to use a styled input from a Material design library, the provided input extends the build-in input component, so it has all required attributes.

[mquandalle]

I tried to implement this feature, and assuming than the “wrapper” component will have all the properties and methods of an input element is indeed very tricky with the JavaScript inheritance model. I believe it would be easier to rely on a unique method on the wrapper, like getInputNode() which will return the internal input DOM node. For instance Material-UI already provide this method.

[s-yadav]

I have added this on 1.1.0 alpha

[mquandalle]

Are you sure this is already implemented? I can't see any code related to that feature...

[s-yadav]

Oh I have not pushed it yet. I am finding input node using document.activeElement (This gives the current focused element). I will push it on the 1.1.0 branch

[s-yadav]

Check the 1.1.0-alpha branch. Also added an example of material-ui

[mquandalle]

@s-yadav Any news on v1.1 release?

edit: I didn't see that the alpha was released on NPM, that's good for me :)

[s-yadav]

1.1.0 is released. Thanks.