npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@bsonntag/react-tabs

v0.1.0

Published

Flexible tab components for react

Downloads

13

Readme

@bsonntag/react-tabs

Flexible tab components for react.

Installation

Using npm:

$ npm install --save @bsonntag/react-tabs

Using yarn:

$ yarn add @bsonntag/react-tabs

This module uses react's createContext API, so make sure you have at least version 16.3.0 installed.

Example usage

import { Tab, TabPanel, Tabs } from '@bsonntag/react-tabs';
import React, { Component } from 'react';

class App extends Component {

  state = {
    selectedTab: 0
  };

  handleSelect = selectedTab => this.setState({ selectedTab });

  render() {
    return (
      <Tabs
        onSelect={this.handleSelect}
        selectedTab={this.state.selectedTab}
      >
        <ul>
          <Tab tab={0}>
            {({ select }) => (
              <li onClick={select}>
                {'First tab'}
              </li>
            )}
          </Tab>

          <Tab tab={1}>
            {({ select }) => (
              <li onClick={select}>
                {'Second tab'}
              </li>
            )}
          </Tab>
        </ul>

        <TabPanel tab={0}>
          {isSelected => isSelected && (
            <div>
              {'First tab content'}
            </div>
          )}
        </TabPanel>

        <TabPanel tab={1}>
          {isSelected => isSelected && (
            <div>
              {'Second tab content'}
            </div>
          )}
        </TabPanel>
      </Tabs>
    );
  }

}

Components

This module contains three components.

<Tabs />

Works mainly as a provider. It only renders its children.

This is a controlled component, so you'll have to save the selected tab on another component's state.

children: React$Node

This component only renders its children.

onSelect: (tab: string | number) => void

The event handler that is called when a tab is selected. This is called with the selected tab.

selectedTab: string | number

The currently selected tab.

<Tab />

children: (args: { isSelected: boolean, select: () => void }) => React$Node

This component receives a function as its children. It calls the children function with an object with two properties:

  • isSelected: this will be true if the tab is selected.
  • select: a function to call when this tab is selected.

This component will render the result of calling its children.

tab: string | number

This tab's identifier.

<TabPanel />

children: (isSelected: boolean) => React$Node

This component receives a function as its children. It calls the children function with an a boolean that will be true if the tab is selected.

This component will render the result of calling its children.

tab: string | number

This tab's identifier.

Contributing

Please feel free to submit any issues or pull requests.

License

MIT