I need to add a placeholder prop to the input element.
Ultimately, all React.InputHTMLAttributes<HTMLInputElement> should be supported.
I see 3 ways to do this:
Enumerate all props that we want to pass down to input: <input placeholder={this.props.placeholder} name={name} .... This has the advantage of passing only valid props down (ref or onChange would be invalid props)
Add a single prop "inputProps" that gets spread down to the input: <input {...this.props.inputProps} .... Easier to implement but not as safe unless we implement some checks.
Use a render prop instead of rendering the input ourself: render() { return children({setInputRef})}. Use: <Place ...>{({setInputRef}) => <input ref={setInputRef} placeholder="whatever"/></Place>}. More flexible but changes the API. Also the calling component would be required to be a component instead of a function (ref are forbidden in SFC)
I need to add a placeholder prop to the input element.
Ultimately, all
React.InputHTMLAttributes<HTMLInputElement>
should be supported.I see 3 ways to do this:
<input placeholder={this.props.placeholder} name={name} ...
. This has the advantage of passing only valid props down (ref
oronChange
would be invalid props)<input {...this.props.inputProps} ...
. Easier to implement but not as safe unless we implement some checks.render() { return children({setInputRef})}
. Use:<Place ...>{({setInputRef}) => <input ref={setInputRef} placeholder="whatever"/></Place>}
. More flexible but changes the API. Also the calling component would be required to be a component instead of a function (ref are forbidden in SFC)