@use-platform/react

⚠️⚠️ At the moment, the project is under active development and has been subjected to major changes. ⚠️⚠️

Motivation

Develop interfaces quickly with accessibility and the same work in all environments.

Installation

npm i -PE @use-platform/react

Usage

All hooks available from root public API. More examples you can find in storybook.

import { useButton } from '@use-platform/react'
import { useRef } from 'react'

export const Button = (props) => {
  const { children } = props
  const buttonRef = useRef(null)
  const { buttonProps } = useButton(props, buttonRef)
  return (
    <button {...buttonProps} ref={buttonRef}>
      {children}
    </button>
  )
}

Terminology

Semantic

Semantic hooks implements behavior of component and sets aria-attributes to ensure accessibility.

State

State hooks contains the local state of the component and allow you to use component in different contexts (e.g. SingleCalendar, RangeCalendar).

Interactions

Interactive hooks uses to ensure correct interaction with interface in any environment (e.g. web, touch, tv).

Roadmap

Approximate work plan (may be adjusted) Q3-Q4:

• [x] interactions
  • [x] useHover
  • [x] usePress
  • [x] useFocusable
• [ ] utils
  • [x] i18n locale
  • [x] useUniqId
• [ ] button
  • [x] useButton
  • [ ] useToggleButton
• [x] toggle
  • [x] useToggle
  • [x] useCheckbox
  • [x] useSwitch
• [x] calendar
  • [x] useCalendar
  • [x] useRangeCalendar
  • [x] useMultipleCalendar
• [x] datefield
  • [x] useSpinButton
  • [x] useDateTimeField
• [x] textfield
  • [x] useTextField
  • [x] usePasswordField
  • [x] useAutoResize
  • [x] useClearButton
• [x] useFocusTrap
• [x] useLabel
• [x] useRadio
• [ ] useSlider
• [ ] useSelect
• [ ] useComboBox
• [ ] useListBox
• [ ] useOverlay
• [ ] usePopup
• [ ] useModal
• [ ] usePortal

License

This project develop under MPL-2.0 license.