Usage no npm install needed!

<script type="module">
  import reactInputLink from 'https://cdn.skypack.dev/react-input-link';
</script>

README

React Input Link

ReactInputLink 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 InputLink = require('react-input-link');

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

Screenshot

Live Demo

more examples here

Install

npm install --save react-input-link

Under the hood

The JSX is structured as follows:

<div>
  <input/>
  <div>
    {this.props.children}
  </div>
</div>

Inside componentDidMount ReactInputLink 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.