React

Xyba Elements offers a React version of each element to provide an idiomatic experience for React users. All element examples are available as both HTML and React JSX.

Importing Elements

import { Button } from 'xyba-elements/react';

const MyComponent = () => <Button capture>A</Button>

export default MyComponent;

Event Handling

Many elements emits custom events. All event names are mapped to the React standard starting with lowercase on. For example, the button event press can be used in JSX with onPress.

import { useState } from 'react';
import { Button } from 'xyba-elements/react';

function MyComponent() {
    const [isPressed, setIsPressed] = useState(false);

    return (
        <Button 
            onPress={(event) => setIsPressed(event.target.pressed)} 
            onRelease={(event) => setIsPressed(event.target.pressed)} 
        >
            A
        </Button>
    );
}

export default MyComponent;

If you are using Typescript, you will need to manually set the event.target type.

import { useState } from 'react';
import { Button } from 'xyba-elements/react';
import type { ButtonElement } from 'xyba-elements/elements/button';

function MyComponent() {
    const [isPressed, setIsPressed] = useState(false);

    return (
        <Button 
            onPress={(event) => setIsPressed((event.target as ButtonElement).pressed)} 
            onRelease={(event) => setIsPressed((event.target as ButtonElement).pressed)} 
        >
            A
        </Button>
    );
}

export default MyComponent;

Typed useRef

When using useRef with Typescript, it's possible to strongly type the reference to the type of element by importing the element type.

import { useRef } from 'react';
import { Button } from 'xyba-elements/react';
import type { ButtonElement } from 'xyba-elements/elements/button';

function MyComponent() {
    const buttonRef = useRef<ButtonElement>(false);

    return <Button ref={buttonRef}>A<Button>;
}

export default MyComponent;