UseTabs - Reusable way to create smooth tab highlights

Overview

useTabs

Reusable way to create smooth tab highlights.

Logo

Installation

Install my-project with npm

  npm install @olivieralexander/usetabs

Usage/Examples

To get started you will need a couple things:

  • A component or element to be used as the highlighter.
  • A container element with a ref and position relative that will wrap your tabs.

useTabs will return 2 things:

  • setHightlight(ref | e): function to trigger the hightlight, takes either a react ref or event.
  • hightlightStyles: object containing styles that will need to be applied on your highlight element.

Note: These examples use TailwindCSS but you're free to use any styling library you want.

setHightlight

<li onMouseEnter={setHightlight}>
    Tab 1
</li>

hightlightStyles

<div
style={highlightStyles}
className="bg-gray-500 bg-opacity-10 rounded-sm"
/>

Full Example:

import { useRef } from "react";
import useTabs from "../hooks/useTabs";

export default function Home() {
  const containerRef = useRef(null);
  const defaultRef = useRef(null);

  const { setHightlight, highlightStyles } = useTabs({
    container: containerRef,
    // defaultTab: defaultRef,
    // duration: 150,
  });

  const tabs = [
    {
      name: "Tab 1",
      id: "tab-1",
    },
    {
      name: "Tab 2",
      id: "tab-2",
    },
    {
      name: "Tab 3",
      id: "tab-3",
    },
  ];

  return (
    <main className="w-screen h-screen grid place-items-center">
      <ul className="w-[50%] flex justify-between relative" ref={containerRef}>
        {tabs.map((tab, i) => (
          <li
            key={tab.id}
            className="py-2 px-8 border rounded cursor-pointer"
            ref={i === 1 ? defaultRef : null}
            onMouseEnter={setHightlight}
          >
            {tab.name}
          </li>
        ))}

        <div
          style={highlightStyles}
          className="bg-gray-500 bg-opacity-10 rounded-sm"
        />
      </ul>
    </main>
  );
}

API Reference

useTabs

Parameter Type Description
container ref Required. Ref of your tab container
defaultTab ref Ref of a tab you would like to set as the default highlighted tab
duration number Number to represent the amount of time in ms how long the animations should take

Acknowledgements

  • Emil Kowalksi

License

MIT

Issues
Releases(v0.0.5)
  • v0.0.5(Jan 13, 2022)

    • when passing null, false or undefined to setHightlight(), the highlight is now automatically hidden.
    • updated README on setHighlight() function

    Full Changelog: https://github.com/OlivierDijkstra/useTabs/compare/v0.0.4...v0.0.5

    Source code(tar.gz)
    Source code(zip)
  • 0.0.2(Jan 10, 2022)

  • 0.0.1(Jan 10, 2022)

    Initial release

    What's Changed

    • added typescript support by @OlivierDijkstra in https://github.com/OlivierDijkstra/useTabs/pull/1

    New Contributors

    • @OlivierDijkstra made their first contribution in https://github.com/OlivierDijkstra/useTabs/pull/1

    Full Changelog: https://github.com/OlivierDijkstra/useTabs/commits/0.0.1

    Source code(tar.gz)
    Source code(zip)
Owner
OlivierAlexander
OlivierAlexander
An accessible and easy tab component for ReactJS.

react-tabs An accessible and easy tab component for ReactJS. https://reactcommunity.org/react-tabs/ Supports React 16.3.0 or newer react-tabs was test

React Community 2.7k Jan 15, 2022
💃 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

Chen-Tai Hou 367 Jan 10, 2022
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

Pier-Luc Gendreau 65 Jan 10, 2022
A multi-tab layout manager

FlexLayout FlexLayout is a layout manager that arranges React components in multiple tab sets, tabs can be resized and moved. Run the Demo Try it now

Caplin 494 Jan 15, 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

David Clark 116 Oct 13, 2021
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

Takeharu.Oshida 137 Dec 21, 2021
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

null 5 Dec 15, 2021
Add collapsible headers to your tab-view components.

React Native Head Tab View ?? ?? ?? v4.0.0-rc.13 has been released, I hope you can help me test and collect questions. In this version, there is a big

null 286 Jan 14, 2022
Fast, open and free-to-use new tab page for modern browsers

Mue Mue is a fast, open and free-to-use browser extension that gives a new, fresh and customisable tab page to modern browsers. Table of contents Scre

Mue 225 Jan 15, 2022
Tabbed navigation that you can swipe between, each tab can have its own ScrollView and maintain its own scroll position between swipes. Pleasantly animated. Customizable tab bar

react-native-scrollable-tab-view This is probably my favorite navigation pattern on Android, I wish it were more common on iOS! This is a very simple

Tomas Roos 6.8k Jan 18, 2022
React Native platform-independent tabs. Could be used for bottom tab bars as well as sectioned views (with tab buttons)

react-native-tabs React Native platform-independent tabs. Could be used for bottom tab bars as well as sectioned views (with tab buttons) Why I need t

Pavel Aksonov 710 Dec 4, 2021
❄️ Winterly Tab ❄️ Beautifully replace new tab screen with winter themed background.

Beautifully replace the new-tab page in your web browser with winter-themed background. It's free & open source!

Diky Hadna 10 Oct 27, 2021
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

Bartłomiej Potaczek 11 Nov 20, 2021
Create smooth gradients in React Native

React Native Easing Gradient

Tien Pham 129 Jan 15, 2022
A lightweight React component that utilizes the power of CSS animations to create silky smooth marquees.

React Fast Marquee React Fast Marquee is a lightweight React component that utilizes the power of CSS animations to create silky smooth marquees. Demo

null 210 Jan 18, 2022
Create reusable components with Alpine JS reactivity 🦑

Apline JS Component Alpine JS plugin x-component allows you to create reusable components, sprinkled with Alpine JS reactive data ?? Example ?? Page W

Mark Mead 7 Jan 13, 2022
Wayfair Tech – Incubator 3 Jan 19, 2022
Easier React Native upgrades by clearly exposing changes from a version to another. :rocket: And what better way than to purge, init, then diff? Spoiler: there's no better way. 😎

RN diff PURGE This repository exposes an untouched React Native app generated with the CLI npx @react-native-community/cli init RnDiffApp. Each new Re

React Native Community 1k Jan 19, 2022
null 0 Dec 4, 2021
A simple way to write re-usable features with React + EffectorA simple way to write re-usable features with React + Effector

Effector Factorio The simplest way to write re-usable features with React + Effector Install npm install effector-factorio Why this? People became to

Anton Kosykh 4 Jan 14, 2022
:speech_balloon: Easy way to create conversation chats

React Simple Chatbot A simple chatbot component to create conversation chats Getting Start npm install react-simple-chatbot --save Usage There are sev

Lucas Bassetti 1.4k Jan 12, 2022
An accessible and easy tab component for ReactJS.

react-tabs An accessible and easy tab component for ReactJS. https://reactcommunity.org/react-tabs/ Supports React 16.3.0 or newer react-tabs was test

React Community 2.7k Jan 15, 2022
💃 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

Chen-Tai Hou 367 Jan 10, 2022
Tab bar with more freedom

react-native-tabbar React-Native Tab bar with more freedom Introduction I have decided to remove all the abstraction from this module. Now there is on

Ali Najafizadeh 263 May 25, 2021
react-native-segmented-control-tab(for Android/iOS)

react-native-segmented-control-tab(for Android/iOS) ?? A react native component with the same concept of react native's SegmantedControlIOS, Primarily

Kiran Kalyan 507 Jan 17, 2022
Slidable tab bar for react native with instant view rendering

react-native-slidable-tab-bar Easily pass views into an organized view selector with a scrollable tab bar Demo Add it to your project Run 'npm install

Philip Brown 41 Dec 20, 2021
Animated bottom Tab bar for react native

react-native-animated-bottom-tabbar typeOne: typeTwo: Getting started $ npm install react-native-animated-bottom-tabbar --save $ npm install react-nat

Sajjad Asadi 19 Dec 30, 2021
FlexLayout is a layout manager that arranges React components in multiple tab sets, tabs can be resized and moved.

FlexLayout is a layout manager that arranges React components in multiple tab sets, tabs can be resized and moved.

Caplin 493 Jan 14, 2022
Glaze is a new tab extension , based primarily on productivity and great UX

Glaze is a new tab extension , based primarily on productivity and great UX, it is still in early phase of development, I have only pushed the create-react-app build for now, but I plan to push the extension version along with build instructions in a few days. Currently glaze has the functionality of setting a nice backgorund with a clock + greeting feature.

Ganesh Futane 3 Oct 18, 2021