Archived

This project has been archived. Please use react-aria from Adobe.

React ARIA

A set of utility components to help compose ARIA components in React. Please feel free to file an issue or submit a PR if you feel these can be more ARIA compliant ❤️

Usage

yarn add react-aria

npm install react-aria --save

<script src="https://unpkg.com/react-aria/dist/react-aria.js"></script>
(UMD library exposed as `ReactARIA`)

Building a select menu

import { Trigger, Select } from 'react-aria'

const { Manager, OptionList, Option } = Select

class SelectMenu extends Component {
  state = {
    selection: null
  }

  _handleSelection = (item, e) => {
    this.setState({
      selection: item.value,
      isOpen: false
    })
  }

  render() {
    const { isOpen } = this.state
    return (
      <Manager>
        <Trigger
          controls="select-menu"
          type="menu"
          isOpen={isOpen}
          onToggle={() => this.setState({ isOpen: !isOpen })}
        >
          {this.state.selection || 'Select A Dropdown Item'}
        </Trigger>
        { isOpen &&
          <OptionList
            id="select-menu"
            onOptionSelection={this._handleSelection}
            onRequestClose={() => this.setState({ isOpen: false })}
          >
            <Option value="apples">Apples</Option>
            <Option value="pears">Pears</Option>
            <Option value="oranges">Oranges</Option>
          </OptionList>
        }
      </Manager>
    )
  }
}

Building a set of tabs

import { Tabs } from 'react-aria'

const { Manager, TabList, Tab, TabPanel } = Tabs

class TabsDemo extends Component {
  state = {
    tabs: [{
      id: 't1',
      title: 'Bacon 🐷',
      panel: <div>And eggs 🐔</div>
    }, {
      id: 't2',
      title: 'Zombiez 💀',
      panel: <div>Brainz</div>
    }, {
      id: 't3',
      title: 'Samuel 👨🏿',
      panel: <div>Samuel L Jackson</div>
    }],
    activeId: 't2'
  }

  render() {
    const { tabs, activeId } = this.state
    return (
      <Manager
        activeTabId={activeId}
        onChange={id => this.setState({ activeId: id })}
        className="tab-set"
      >
        <TabList className="tab-list">
          {tabs.map(({ id, title }) =>
            <Tab
              key={id}
              id={id}
              isActive={id === activeId}
              className={`tab-list-item ${id === activeId ? 'is-active' : ''}`}
            >
              {title}
            </Tab>
          )}
        </TabList>
        <div className="tab-panels">
          {tabs.map(({ id, panel }) =>
            <TabPanel
              key={id}
              controlledBy={id}
              isActive={id === activeId}
              className="tab-panel"
            >
              {panel}
            </TabPanel>
          )}
        </div>
      </Manager>
    )
  }
}

Running Locally

clone repo

git clone git@github.com:souporserious/react-aria.git

move into folder

cd ~/react-aria

install dependencies

npm install

run dev mode

npm run dev

open your browser and visit: http://localhost:8080/

Thank You

Huge thank you to David Clark and all of his ARIA work. Most of the code in here is heavily inspired by what he has done.