#
View
The View component is a styled container for wrapping other content with optional layout and style props.
React / Next.js
Hello from View!
View
View is a div container with customizable layout, dimensions, color, spacing, and event props.
Prop | Description | Value(s) |
---|---|---|
`children` | Content to be rendered inside the View. | `ReactNode` |
`content` | Alternate to children. Renders content if children is not provided. | `ReactNode` |
`funcss` | Extra class names for styling (e.g., from Funcss). | `string` |
`customStyle` | Inline custom styles. | `CSSProperties` |
`height` | Height of the container. | `string | number` |
`width` | Width of the container. | `string | number` |
`padding` | Padding inside the container. | `string | number` |
`margin` | Margin around the container. | `string | number` |
`display` | CSS display type. | `"flex" | "block" | "inline" | etc.` |
`flexDirection` | Direction of flex children. | `"row" | "column" | etc.` |
`justifyContent` | Justify content alignment. | `CSS justifyContent values` |
`alignItems` | Align items in flex. | `CSS alignItems values` |
`bg` | Background utility class (e.g., "bg-primary"). | `string` |
`borderRadius` | Rounded corners of the container. | `string` |
`boxShadow` | Box shadow styling. | `string` |
`position` | Positioning of the container. | `"relative" | "absolute" | etc.` |
`top / left / right / bottom` | Position offsets. | `string | number` |
`zIndex` | Z-index stacking. | `number` |
`overflow` | Overflow behavior. | `string` |
`fit` | If true, sets width and height to 100%. | `boolean` |
`onClick, onFocus, etc.` | All native event handlers supported. | `function` |