New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More

reakit

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

reakit

Toolkit for building accessible rich web apps with React

1.3.11
latest
90

Supply Chain Security

100

Vulnerability

100

Quality

77

Maintenance

100

License

Version published
Maintainers
1
Created

What is reakit?

Reakit is a toolkit for building accessible web apps with React. It provides a set of low-level components and hooks that can be used to create custom, accessible UI components.

What are reakit's main functionalities?

Accessible Dialog

This code demonstrates how to create an accessible dialog using Reakit. The `useDialogState` hook manages the state of the dialog, and the `Dialog` and `DialogDisclosure` components are used to render the dialog and the button that opens it.

import React from 'react';
import { useDialogState, Dialog, DialogDisclosure } from 'reakit/Dialog';

function App() {
  const dialog = useDialogState();
  return (
    <>
      <DialogDisclosure {...dialog}>Open Dialog</DialogDisclosure>
      <Dialog {...dialog} aria-label="Welcome">
        <p>Welcome to Reakit Dialog!</p>
        <button onClick={dialog.hide}>Close</button>
      </Dialog>
    </>
  );
}

export default App;

Accessible Menu

This code demonstrates how to create an accessible menu using Reakit. The `useMenuState` hook manages the state of the menu, and the `Menu`, `MenuItem`, and `MenuButton` components are used to render the menu and its items.

import React from 'react';
import { useMenuState, Menu, MenuItem, MenuButton } from 'reakit/Menu';

function App() {
  const menu = useMenuState();
  return (
    <>
      <MenuButton {...menu}>Menu</MenuButton>
      <Menu {...menu} aria-label="Preferences">
        <MenuItem {...menu}>Profile</MenuItem>
        <MenuItem {...menu}>Settings</MenuItem>
        <MenuItem {...menu}>Logout</MenuItem>
      </Menu>
    </>
  );
}

export default App;

Accessible Tabs

This code demonstrates how to create accessible tabs using Reakit. The `useTabState` hook manages the state of the tabs, and the `Tab`, `TabList`, and `TabPanel` components are used to render the tabs and their content.

import React from 'react';
import { useTabState, Tab, TabList, TabPanel } from 'reakit/Tab';

function App() {
  const tab = useTabState();
  return (
    <>
      <TabList {...tab} aria-label="My tabs">
        <Tab {...tab}>Tab 1</Tab>
        <Tab {...tab}>Tab 2</Tab>
        <Tab {...tab}>Tab 3</Tab>
      </TabList>
      <TabPanel {...tab}>Content 1</TabPanel>
      <TabPanel {...tab}>Content 2</TabPanel>
      <TabPanel {...tab}>Content 3</TabPanel>
    </>
  );
}

export default App;

Other packages similar to reakit

FAQs

Package last updated on 18 Nov 2021

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts