Develop interfaces quickly with accessibility and the same work in all environments.
Currently package has development name web-platform-alpha
and will change in the future.
npm i -PE web-platform-alpha
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>
)
}
Semantic hooks implements behavior of component and sets aria-attributes to ensure accessibility.
State hooks contains the local state of the component and allow you to use component in different contexts (e.g. SingleCalendar, RangeCalendar).
Interactive hooks uses to ensure correct interaction with interface in any environment (e.g. web, touch, tv).
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
This project develop under MPL-2.0 license.