InputLink is a replacement for the base input react component capable of rendering a child (link, button ..) inside the input itself.
JavaScript
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
examples
src
test
.drone.sec
.drone.yml
.eslintignore
.eslintrc
.gitignore
.hophoprc
.npmignore
CHANGELOG.md
LICENSE
README.md
generateReadme.js
index.js
karma.conf.js
karma.js
package.json
yarn.lock

README.md

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.

var InputChildren = require('react-input-children');

React.renderComponent(
  <div>
    <InputChildren {...inputProps}>
      <a href="/forgot-password">Forgot?</a>
    </InputChildren>
  </div>,
  document.body);

Screenshot

Live Demo

more examples here

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.