View

View is a core component that renders everything in the library. It is the principle component in the entire library.

Everything is a View, and a View is everything.

Usage

import { Text, View } from "@wp-g2/components"
function Example() {
  return (
    <View>
      <Text>Into The Unknown</Text>
    </View>
  )
}

Props

___css

Type: InterpolatedCSS

Render custom CSS using the style system. The cx prop combines custom styling with the css prop. Typically used "internally" to establish based styles for a View.

as

Type: string,E

Render the component as another React Component or HTML Element.

css

Type: InterpolatedCSS

Render custom CSS using the style system.

cx

Type: any

Combines classNames as well as CSS style rules created with the css function.

Styling

Presets

The Style system provides a bunch of style presets, which come from @wp-g2/styles. These presets are namespaced under ui.

Presets can style a View by passing an Array of them into the css prop.

import { Text, View } from "@wp-g2/components"
import { ui } from "@wp-g2/styles"
function Example() {
  return (
    <View
      css={[
        ui.padding(5),
        ui.background.blue,
        ui.hover(ui.background.red, ui.scale(1.02)),
        ui.active(ui.background.yellow, ui.scale(0.8)),
        ui.animation.bounce,
      ]}
    >
      <Text>Into The Unknown</Text>
    </View>
  )
}