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 [email protected]: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.