SelectArea

The Select Area component is a wrapper for a selection interaction, which stretches to fill the dimensions of its parent element. The parent is responsible for using the selection value to identify what children elements fall inside the selection.

name	type	required	comment
children	ReactNode | ReactNode[]	yes	the SelectArea should be the parent of any other elements that require user interaction via the mouse.
ariaLabel	string	no
className	string	no
onSelectionChange	(selection: Selection) => void	no
onSelectionEnd	(e: PointerEvent<Element>) => void	no
onSelectionStart	(e: PointerEvent<Element>) => void	no
role	AriaRole	no
style	CSSProperties	no

Result

Loading...

Live Editor

function SelectAreaDemo() { const [selection, setSelection] = useState({}); const [selectionState, setSelectionState] = useState('inactive'); return ( <div style={{ position: 'relative', height: '300px', border: '1px solid black' }}> <SelectArea onSelectionChange={(s) => setSelection(s)} onSelectionStart={() => setSelectionState('active')} onSelectionEnd={() => setSelectionState('inactive')} > <div> <p style={{ textAlign: 'center' }}> Click+drag anywhere in this area to start a selection <br /> {selectionState} <br /> </p> {!!Object.keys(selection).length && ( <div> Selection values: <ul> {Object.entries(selection).map(([key, value]) => ( <li key={key}> {key}: {value} </li> ))} </ul> </div> )} </div> </SelectArea> </div> ); }

function SelectAreaDemo() {
    const [selection, setSelection] = useState({});
    const [selectionState, setSelectionState] = useState('inactive');

    return (
        <div style={{ position: 'relative', height: '300px', border: '1px solid black' }}>
            <SelectArea
                onSelectionChange={(s) => setSelection(s)}
                onSelectionStart={() => setSelectionState('active')}
                onSelectionEnd={() => setSelectionState('inactive')}
            >
                <div>
                    <p style={{ textAlign: 'center' }}>
                        Click+drag anywhere in this area to start a selection
                        <br />
                        {selectionState}
                        <br />
                    </p>
                    {!!Object.keys(selection).length && (
                        <div>
                            Selection values:
                            <ul>
                                {Object.entries(selection).map(([key, value]) => (
                                    <li key={key}>
                                        {key}: {value}
                                    </li>
                                ))}
                            </ul>
                        </div>
                    )}
                </div>
            </SelectArea>
        </div>
    );
}