View

The fundamental layout primitive.

View has built in accessibility controls, enforces flexbox columns by default (and supports grid and float layout). Raw text nodes are not allowed as children or siblings of View, and no text-related styling is supported. A View nested within a Text will render inline without altering its display or that of its children. Accessibility props map directly to WAI-ARIA properties (excluding properties and values that are deprecated, redundant, or to be avoided).

import { View } from 'react-gui/view';

<View {...props} />;

API #

Props #

accessibilityActiveDescendant ?string

Equivalent to aria-activedescendant.

accessibilityAtomic ?boolean

Equivalent to aria-atomic.

accessibilityAutoComplete ?string

Equivalent to aria-autocomplete.

accessibilityBusy ?boolean

Equivalent to aria-busy.

accessibilityChecked ?(boolean | "mixed")

Equivalent to aria-checked.

accessibilityColumnCount ?number

Equivalent to aria-colcount.

accessibilityColumnIndex ?number

Equivalent to aria-colindex.

accessibilityColumnSpan ?number

Equivalent to aria-colspan.

accessibilityControls ?string

Equivalent to aria-controls.

accessibilityDescribedBy ?string

Equivalent to aria-describedby.

accessibilityDetails ?string

Equivalent to aria-details.

accessibilityDisabled ?boolean

Equivalent to aria-disabled.

accessibilityErrorMessage ?string

Equivalent to aria-errormessage.

accessibilityExpanded ?boolean

Equivalent to aria-expanded.

accessibilityFlowTo ?string

Equivalent to aria-flowto.

accessibilityHasPopup ?string

Equivalent to aria-haspopup.

accessibilityHidden ?boolean

Equivalent to aria-hidden.

accessibilityInvalid ?boolean

Equivalent to aria-invalid.

accessibilityKeyShortcuts ?Array<string>

Equivalent to aria-keyshortcuts.

accessibilityLabel ?string

Equivalent to aria-label.

accessibilityLabelledBy ?string

Equivalent to aria-labelledby.

accessibilityLiveRegion ?("assertive" | "off" | "polite")

Equivalent to aria-live.

accessibilityModal ?boolean

Equivalent to aria-modal.

accessibilityMultiline ?boolean

Equivalent to aria-multiline.

accessibilityMultiSelectable ?boolean

Equivalent to aria-multiselectable.

accessibilityOrientation ?("horizontal" | "vertical")

Equivalent to aria-orientation.

accessibilityOwns ?string

Equivalent to aria-owns.

accessibilityPlaceholder ?string

Equivalent to aria-placeholder.

accessibilityPosInSet ?number

Equivalent to aria-posinset.

accessibilityPressed ?boolean

Equivalent to aria-pressed.

accessibilityReadOnly ?boolean

Equivalent to aria-readonly.

accessibilityRequired ?boolean

Equivalent to aria-required.

accessibilityRole ?boolean

Equivalent to role.

accessibilityRoleDescription ?string

Equivalent to aria-roledescription.

accessibilityRowCount ?number

Equivalent to aria-rowcount.

accessibilityRowIndex ?number

Equivalent to aria-rowindex.

accessibilityRowSpan ?number

Equivalent to aria-rowspan.

accessibilitySelected ?boolean

Equivalent to aria-selected.

accessibilitySetSize ?number

Equivalent to aria-setsize.

accessibilitySort ?("ascending" | "descending" | "none" | "other")

Equivalent to aria-sort.

accessibilityValueMax ?number

Equivalent to aria-valuemax.

accessibilityValueMin ?number

Equivalent to aria-valuemin.

accessibilityValueNow ?number

Equivalent to aria-valuenow.

accessibilityValueText ?string

Equivalent to aria-valuetext.

children any

The children of a View element can be other elements and must not include strings (or components that render down to strings).

dataSet ?Object

Equivalent to HTMLElement.dataset.

direction ?("ltr" | "rtl")

Equivalent to HTMLElement.dir

focusable ?boolean

Set whether the view can receive keyboard focus.

href ?string

If href is defined, the view is rendered as an anchor tag pointing to this URL.

hrefAttrs ?Object

If href is defined, this prop defines related attributes to include on the anchor (e.g., download, rel, target) which may modify its behavior.

lang ?string

Equivalent to HTMLElement.lang.

nativeID ?string

Equivalent to HTMLElement.id.

style ?Style

Set the styles of the view.

testID ?string

Set the test selector label (via data-testid).

Style #


Details #

Layout #

Flexbox column by default.

Content #

No text content.

Updated
Edit
React GUICopyright © Facebook Inc.