Sorry, this module is not yet documented and tested. It does work though! So you can use its powerfull features.

The focuscontainer adds a wrapper over items that should be focussable by keyboard movement.

Look at the the file lib/component.jsx for the properties to use.

Features:

• Adds keyboard focussing
• Focus stays inside the container
• Specify which keys trigger the focus
• Specify which element should be focussed (even non-focussable elements)
• Focussed elements outside the view get inside through transition
• Life: keeps on doing its job when descendant React-Components change
• Container gets labelled with a class itsa-focuscontainer-focussed when descendant element has focus
• Works with nested focus-containers

How to use:

const React = require("react"),
    ReactDOM = require("react-dom"),
    FocusContainer = require("itsa-react-focuscontainer");

ReactDOM.render(
    <FocusContainer transitionTime={300} >
        <input type="text" />
        <input type="text" />
        <input type="text" />
        <button>Press me</button>
    </FocusContainer>,
    document.getElementById("component-container")
);

Or nested:

.itsa-focuscontainer:focus {
    border-style: dotted;
}

const React = require("react"),
    ReactDOM = require("react-dom"),
    FocusContainer = require("itsa-react-focuscontainer");

ReactDOM.render(
    <FocusContainer transitionTime={300} >
        <input type="text" />
        <input type="text" />
        <input type="text" />
        <FocusContainer
            keyEnter={13}
            transitionTime={300} >
            <input type="text" />
            <input type="text" />
            <input type="text" />
        </FocusContainer>,
        <button>Press me</button>
    </FocusContainer>,
    document.getElementById("component-container")
);

If you want to express your appreciation

Feel free to donate to one of these addresses; my thanks will be great :)

• Ether: 0xE096EBC2D19eaE7dA8745AA5D71d4830Ef3DF963
• Bitcoin: 37GgB6MrvuxyqkQnGjwxcn7vkcdont1Vmg