web-platform-alpha

[][storybook] [][npm]

Usage no npm install needed!

<script type="module">
  import webPlatformAlpha from 'https://cdn.skypack.dev/web-platform-alpha';
</script>

README

storybook npm

⚠️⚠️ 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:

License

This project develop under MPL-2.0 license.