itsa-react-focuscontainer

16.0.9 • Public • Published

Build Status

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

Package Sidebar

Install

npm i itsa-react-focuscontainer

Weekly Downloads

1

Version

16.0.9

License

BSD-3-Clause

Unpacked Size

1.49 MB

Total Files

42

Last publish

Collaborators

  • itsasbreuk