https://github.com/souporserious/react-aria

Utility components to help compose React ARIA components
https://github.com/souporserious/react-aria

Last synced: 4 months ago
JSON representation

Utility components to help compose React ARIA components

• Host: GitHub
• URL: https://github.com/souporserious/react-aria
• Owner: souporserious
• License: mit
• Archived: true
• Created: 2016-07-04T10:13:12.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2020-09-15T18:02:34.000Z (about 4 years ago)
• Last Synced: 2024-08-11T07:53:28.760Z (4 months ago)
• Language: JavaScript
• Homepage: https://souporserious.github.io/react-aria/
• Size: 690 KB
• Stars: 144
• Watchers: 5
• Forks: 5
• Open Issues: 15
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Archived

This project has been archived. Please use [react-aria](https://react-spectrum.adobe.com/react-aria/index.html) from Adobe.

## React ARIA

[![npm version](https://badge.fury.io/js/react-aria.svg)](https://badge.fury.io/js/react-aria)

[![Dependency Status](https://david-dm.org/souporserious/react-aria.svg)](https://david-dm.org/souporserious/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`

```html

(UMD library exposed as `ReactARIA`)

```

### Building a select menu

```jsx

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 (

      

         this.setState({ isOpen: !isOpen })}

        >

          {this.state.selection || 'Select A Dropdown Item'}

        

        { isOpen &&

           this.setState({ isOpen: false })}

          >

            Apples

            Pears

            Oranges

          

        }

      

    )

  }

}

```

### Building a set of tabs

```jsx

import { Tabs } from 'react-aria'

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

class TabsDemo extends Component {

  state = {

    tabs: [{

      id: 't1',

      title: 'Bacon 🐷',

      panel: 
And eggs 🐔

    }, {

      id: 't2',

      title: 'Zombiez 💀',

      panel: 
Brainz

    }, {

      id: 't3',

      title: 'Samuel 👨🏿',

      panel: 
Samuel L Jackson

    }],

    activeId: 't2'

  }


  render() {

    const { tabs, activeId } = this.state

    return (

       this.setState({ activeId: id })}

        className="tab-set"

      >

        

          {tabs.map(({ id, title }) =>

            

              {title}

            

          )}

        

        


          {tabs.map(({ id, panel }) =>

            

              {panel}

            

          )}

        

      

    )

  }

}

```


## 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](https://github.com/davidtheclark) and all of his ARIA work. Most of the code in here is heavily inspired by what he has done.