react-input-children
v5.0.0
Published
A replacement for the base <input> component capable of rendering a child (link, button...) inside the input itself
Downloads
440
Readme
React Input Children
InputChildren
is a replacement for the base input react component capable of rendering a child (link, button...) inside the input itself. It supports the same props of react input.
import InputChildren from 'react-input-children';
React.renderComponent(
<div>
<InputChildren {...inputProps}>
<a href="/forgot-password">Forgot?</a>
</InputChildren>
</div>,
document.body);
Install
npm install --save react-input-children
Under the hood
The JSX is structured as follows:
<div>
<input/>
<div>
{children}
</div>
</div>
Inside componentDidMount InputChildren
gets height and width of the child div wrapper and uses them to position it correctly inside the input and to give the correct right padding to the input itself.