React tabindex content

Last update: Dec 8, 2021

react-tabindex-content

you can use tab to switch the focus of dom elements

Example

gras

the following order of focus is 3->4->0 , if the allowReadOnly is true , the order will be 3->4->10->0

Installation

npm install react-tabindex-content
#or
yarn add react-tabindex-content

API

Property Description Type Default
global effective range , global or inside div bool true
allowReadOnly allow readonly element to focus bool false

How to use it

{ new Array(5).fill().map((item, index) => { let tabIndex = Math.floor(Math.random() * 10 + (-5)); return ( ) }) }
); } ReactDOM.render(, document.getElementById("app"));">
import React from "react";
import ReactDOM from "react-dom";
import TabIndexContent from "react-tabindex-content";

function App(props) {
    return (
        <div>
            <TabIndexContent global={true} allowReadOnly={true}>
                {
                    new Array(5).fill().map((item, index) => {
                        let tabIndex = Math.floor(Math.random() * 10 + (-5));
                        return (
                            <input key={index} style={{ width: 100, marginLeft: 10, marginTop: 10 }} tabIndex={tabIndex} placeholder={tabIndex}></input>
                        )
                    })
                }
                <input style={{ width: 100, marginLeft: 10, marginTop: 10 }} tabIndex={10} readOnly placeholder={`readOnly${10}`}></input>
                <input style={{ width: 100, marginLeft: 10, marginTop: 10 }} tabIndex={11} disabled placeholder={`disabled${11}`}></input>
            </TabIndexContent>
        </div>
    );
}

ReactDOM.render(<App />, document.getElementById("app"));

GitHub

https://github.com/chencaize/react-tabindex-content
You might also like...

Declarative, modular and accessible React tabs component

react-web-tabs Modular and accessible React tabs according to the WAI-ARIA Authoring Practices 1.1. Demo See the demo website for a live example. Docu

Apr 29, 2022

React reusable tab component

React reusable tab component

react-re-super-tabs React reusable tab component Demo Installing yarn: yarn add react-re-super-tabs npm: npm install react-re-super-tabs --save Usage

May 7, 2022

Tabs navigation component for React.

Easy to use React tab component 3 different looks/themes Define transition speed or use the navigation in the bottom Nest tab components inside other

Dec 10, 2018

React Tabs component.

React Tabs component.

rc-tabs React Tabs component. Screenshot Example http://localhost:8000/examples online example: https://tabs.react-component.now.sh/ install Feature K

Aug 8, 2022

React responsive tabs

 React responsive tabs

React responsive tabs Live demo Your feedback is highly appreciated! Please, file an issue if something went wrong or let me know via Twitter @maslian

May 12, 2022

A simple tab scroll view for react native

react-native-tab-flatlist ReactNative 跨平台实现TabView嵌套ScrollView滚动吸顶效果,采用react-native-tab-view+flatlist实现效果丝滑 安装 使用前需要先安装react-native-tab-view 与 react-n

Feb 23, 2022

UI Bar in javascript for react native

UI Bar in javascript for react native

react-native-bottom-toolbar Bottom toolbar styled as in iOS, implemented in JS, typed with Flow. Highly configurable with text or icons (I recommend r

May 6, 2022

React Navigation for React js that tries to ensure that the elements of the navigators display correctly on devices with notches and UI elements which may overlap the app content.

React Navigation for React js that tries to ensure that the elements of the navigators display correctly on devices with notches and UI elements which may overlap the app content.

React Navigation for React js that tries to ensure that the elements of the navigators display correctly on devices with notches (e.g. iPhone X) and UI elements which may overlap the app content.

Dec 7, 2021

Flipping Cards for your React Projects. React-Flippy allows you to create flipper event with your content.

Flipping Cards for your React Projects. React-Flippy allows you to create flipper event with your content.

React-Flippy React-Flippy allows you to create flipping cards in React projects. It can be used as controlled or uncontrolled component. Live Demo How

Jun 19, 2022

💀 Dead simple content loading components for React and React-Native. 💀

react-bones Dead simple loading components for React and React-Native. NPM GitHub 💀 npm i react-bones React import { Bones } from "react-bones/lib";

Mar 3, 2022

Collapsible-react-component - Collapses and expands content with an animation for react

Collapsible react component Collapses and expands content with an animation. Ins

Apr 18, 2022

Official SweetAlert2 enhancer adding support for React elements as content

sweetalert2-react-content Official SweetAlert2 enhancer adding support for React elements as content. The following options can be React elements: tit

Aug 5, 2022

React content transition slider. Awesome Slider is a 60fps, light weight, performant component that renders an animated set of production ready UI general purpose sliders. 🖥️ 📱

React content transition slider. Awesome Slider is a 60fps, light weight, performant component that renders an animated set of production ready UI general purpose sliders. 🖥️ 📱

React Awesome Slider v3 [NEW fullpage navigation HOC] react-awesome-slider is a 60fps, extendable, highly customizable, production ready React Compone

Aug 5, 2022

A component for React that utilizes the Counterpart module to provide multi-lingual/localized text content.

React Translate Component Translate is a component for React that utilizes the Counterpart module and the Interpolate component to provide multi-lingu

May 27, 2022

Renders static content efficiently by allowing React to short-circuit the reconciliation process.

react-static-container Renders static content efficiently by allowing React to short-circuit the reconciliation process. This component should be used

Apr 15, 2022

Create amazing 360 and VR content using React

React 360 React 360 is a framework for the creation of interactive 360 experiences that run in your web browser. It pairs modern APIs like WebGL and W

Aug 5, 2022

Create amazing 360 and VR content using React

React 360 React 360 is a framework for the creation of interactive 360 experiences that run in your web browser. It pairs modern APIs like WebGL and W

Aug 3, 2022

Create amazing 360 and VR content using React

React 360 React 360 is a framework for the creation of interactive 360 experiences that run in your web browser. It pairs modern APIs like WebGL and W

Aug 5, 2022

🏖️ Display some placeholder stuff before rendering your text or media content in React Native

🏖️ Display some placeholder stuff before rendering your text or media content in React Native

Display some placeholder stuff before rendering your text or media content in React Native. Compatible with Expo and react-native-web. Snack applicati

Jul 26, 2022
React-tabs-navigation is a nice react component that enables navigation through tabs in your web app.

react-tabs-navigation This react component enables navigating through tabs in your web app. It is composed of three different parts: Banner This conte

Aug 8, 2020
💃 Make your react tab dance🕺
💃 Make your react tab dance🕺

A mobile support, draggable, editable and api based Tab for ReactJS. Support react >= v16.3 Note: Since v2, we don't support v15 and old styled-compon

Jul 18, 2022
Simple blacklist hook for react-navigation to toggle top/bottom tabs.

react-navigation-blacklist Simple blacklist hook for react-navigation to toggle top/bottom tabs. Installation Make sure you have installed react-navig

Nov 22, 2021
Headless, simple, and highly flexible tab-like primitives built with react hooks

react-headless-tabs Headless and highly flexible tab-like primitives built with react hooks ?? Check out the documentation and interactive examples! F

Jul 28, 2022
React tabs with hooks

@bumaga/tabs Headless tabs component for React Features ?? super small, 381 B vs 3.5kB react-tabs ?? no styles, just logic. Style what you want, as yo

Jul 27, 2022
Draggable atom-like tabs for React
Draggable atom-like tabs for React

React draggable tabs The plugin is inspired by Atom and allows you to use these beautiful tabs in your React App Install just download the repo from n

Mar 27, 2022
A fully accessible, extravagantly flexible, React-powered Tab Panel component

react-aria-tabpanel SEEKING CO-MAINTAINERS! Continued development of this project is going to require the work of one or more dedicated co-maintainers

Aug 7, 2022
Atom like draggable tab react component
Atom like draggable tab react component

React-draggable-tab Atom like draggable tab react component. Demo View Demo Installation npm install --save react-draggable-tab React v0.14 is support

Apr 27, 2022
A React component used to render accessible and simple tabs

Faster React Tabs Faster React Tabs is a flexible and context-agnostic React component used to render accessible and simple tabs. You can play with th

May 30, 2022
An accessible React tabs component

React Accessible Tabs An accessible React tabs component, ported from my vanilla JS plugin. Demo See it in action. Usage Installation npm install reac

Dec 4, 2020