Tabguard

react-tabguard (GitHub: avocode/react-tabguard, License: MIT, npm: react-tabguard)

A problem all of face at some point in our career is: A product owner who comes to you with the question to contain the Tab navigation to only one form. Something like this for instance:

There isn’t really an easy way to limit tabbing to a specified area inside your HMTL document. It’s not desirable to lose focus on the overlay window when tabbing. Luckily the some developer saw this and started working on React TabGuard to save the day.

Since there is not really an extensive API to discuss I will just give you with an example of how to use is:

import React from 'react';
import TabGuard from 'react-tabguard';

function App(props) {
  return (<div className="double-form-container">
    <div className="left">
      <TabGuard>
        <h1>Form A</h1>
        <input type="text" placeholder="Name"/>
        <input type="number" placeholder="Age"/>
        <button>Send</button>
      </TabGuard>
    </div>
    <div className="right">
      <TabGuard>
        <h1>Form B</h1>
        <input type="text" placeholder="Name"/>
        <input type="number" placeholder="Age"/>
        <button>Send</button>
      </TabGuard>
    </div>    
  </div>);
}