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.