https://github.com/apkoponen/tailwind-accessible-react-demo

Accessible Listbox built with React + Tailwind CSS
https://github.com/apkoponen/tailwind-accessible-react-demo

Last synced: about 2 months ago
JSON representation

Accessible Listbox built with React + Tailwind CSS

• Host: GitHub
• URL: https://github.com/apkoponen/tailwind-accessible-react-demo
• Owner: apkoponen
• Created: 2020-05-30T20:25:35.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2023-01-06T07:28:14.000Z (about 2 years ago)
• Last Synced: 2023-08-02T17:36:43.281Z (over 1 year ago)
• Language: TypeScript
• Homepage: https://tailwind-accessible-react-demo.now.sh
• Size: 1.39 MB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 11
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Tailwind CSS + React + TypeScript accessible demo

This is a demo of building an accessible React ListBox component. This is mostly a port of [https://github.com/tailwindui/vue].

# Example

```

import { useState } from "react";

import {

  Listbox,

  ListboxButton,

  ListboxLabel,

  ListboxList,

  ListboxOption,

} from "../src/components/Listbox";

import classNames from "classnames";

const chevronDown = (

  

    

  

);

export default function Home() {

  const wrestlers = [

    "The Ultimate Warrior",

    "Randy Savage",

    "Hulk Hogan",

    "Bret Hart",

    "The Undertaker",

    "Mr. Perfect",

    "Ted DiBiase",

    "Bam Bam Bigelow",

    "Yokozuna",

  ];

  const [selectedWrestler, setSelectedWrestler] = useState(wrestlers[0]);

  return (

    


      


        

          {({ isOpen }) => (

            <>

              

                Select a wrestler:

              

              

                {selectedWrestler} {chevronDown}

              

              {isOpen && (

                

                  {wrestlers.map((wrestler) => (

                    

                      {({ isActive }) => (

                        


                          {wrestler}

                        

                      )}

                    

                  ))}

                

              )}

            >

          )}

        

      

    

  );

}


```