---
name: "View"
mode: "component"
versionRequirements:
  - { name: "@ray-js/ray", version: "0.5.10" }
title: "View - Element for page layout"
---

## View

> [VERSION] @ray-js/ray >= 0.5.10

### Description

Container component for page layout, supporting flex layout and custom styles; the fundamental block-level element for building pages.

### Props

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `hoverClassName` | `string` | No | `"none"` | Class applied when pressed; set to none to disable the pressed state |
| `hoverStartTime` | `number` | No | `20` | How long to press before the pressed state appears, in milliseconds |
| `hoverStayTime` | `number` | No | `70` | Duration the pressed state remains after the finger is released, in milliseconds |
| `hoverable` | `boolean` | No | `true` | Whether to enable the touch-responsive hover style |

### Examples

#### Basic usage

```tsx
import React from 'react';
import { View, Text } from '@ray-js/ray';

export default function BasicView() {
  return (
    <View
      style={{
        height: '120rpx',
        backgroundColor: '#e67d1b',
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
      }}
      onTouchStart={() => console.log('touch start')}
      onTouchEnd={() => console.log('touch end')}
      onClick={() => console.log('click')}
    >
      <Text style={{ color: '#fff' }}>Tap the container</Text>
    </View>
  );
}
```

#### Flex layout

```tsx
import React from 'react';
import { View, Text } from '@ray-js/ray';

export default function FlexView() {
  return (
    <View
      style={{
        display: 'flex',
        flexDirection: 'row',
        width: '100%',
      }}
    >
      <View
        style={{
          flex: 1,
          height: '120rpx',
          backgroundColor: '#e67d1b',
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
          marginRight: '10rpx',
        }}
        onClick={() => console.log('A')}
      >
        <Text style={{ color: '#fff' }}>A</Text>
      </View>
      <View
        style={{
          flex: 1,
          height: '120rpx',
          backgroundColor: '#e67d1b',
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
        }}
        onClick={() => console.log('B')}
      >
        <Text style={{ color: '#fff' }}>B</Text>
      </View>
    </View>
  );
}
```

#### Hover/active state

```tsx
import React from 'react';
import { View, Text } from '@ray-js/ray';

export default function HoverView() {
  return (
    <View style={{ padding: '20rpx' }}>
      <View
        hoverable
        style={{
          height: '100rpx',
          backgroundColor: '#e67d1b',
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
          marginBottom: '20rpx',
        }}
      >
        <Text style={{ color: '#fff' }}>hoverable (opacity decreases on press)</Text>
      </View>
      <View
        hoverable
        hoverClassName="custom-hover"
        hoverStartTime={100}
        hoverStayTime={300}
        style={{
          height: '100rpx',
          backgroundColor: '#1890ff',
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
        }}
      >
        <Text style={{ color: '#fff' }}>
          Custom hover (appears after 100ms delay, stays for 300ms)
        </Text>
      </View>
    </View>
  );
}
```