Newlyweds Proposing Marriage

    react-controlled-focus

    0.1.5 • Public • Published

    React Controlled Focus

    Build Status npm version js-standard-style

    One of the biggest advantages of using React is having the possibility of a completely declarative UI, which is amazing until you run into trying to controll focus.

    This is an attempt at managing focus the same way controled components handle value.

    The biggest difference between focus and value is that focus is not actually a property of the input itself, but rather the document, in the form of the document.activeElement. This library approaches the problem by moving the focus management outside of the individual elements up to a <ControlledFocus> top level component.

    Open the demo page to see it in action.

    WARNING: The API is nowhere near 1.0 stability and it is pretty much an experiment at this point. Appretiate any feedback if I'm doing something that doesn't make sense.

    Usage

    Install the package:

    npm intall --save react-controlled-focus

    The API itself is very simple, wrap the entire application arround a <ControlledFocus>, set up which element should have the focus via the activeElement and handle changes in focus via the onFocus callback:

    <ControlledFocus activeElement='input-1' onFocus={}>
      // children components that will have the focus under-controll.
      <input data-focus-id='input-1'/>
    </ControlledFocus>

    The value of activeElement must match the name in data-focus-id.

    Development

    For local development:

    npm start

    And open http://0.0.0.0:3000/demo.html.

    Caveats

    At this point there are a couple:

    • The biggest caveat of the current implementation is that there can be only one ControlledFocus component per page;
    • We still required a data attribute named data-focus-id on each component we wish to have focus controlled;
    • Depending on data-focus-id makes it hard to controll the focus on components that you don't own.

    Install

    npm i react-controlled-focus

    DownloadsWeekly Downloads

    5

    Version

    0.1.5

    License

    ISC

    Last publish

    Collaborators

    • pirelenito