README
⚠️⚠️ 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
Currently package has development name web-platform-alpha
and will change in the future.
npm i -PE web-platform-alpha
Usage
All hooks available from root public API. More examples you can find in storybook.
import { useRef } from 'react'
import { useButton } from 'web-platform-alpha'
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:
- interactions
- utils
- button
- useButton
- useToggleButton
- toggle
- calendar
- datefield
- textfield
- useFocusTrap
- useLabel
- useRadio
- useSlider
- useSelect
- useComboBox
- useListBox
- useOverlay
- usePopup
- useModal
- usePortal
License
This project develop under MPL-2.0 license.