Bounding

A cross-platform React container component that constrains content width within specified minimum and maximum bounds. Useful for form fields and other width-limited content.

Installation

npm install @xsolla/xui-bounding
# or
yarn add @xsolla/xui-bounding

Demo

Basic Bounding

import * as React from 'react';
import { Bounding } from '@xsolla/xui-bounding';
import { Input } from '@xsolla/xui-input';

export default function BasicBounding() {
  return (
    <Bounding>
      <Input placeholder="Width constrained input" />
    </Bounding>
  );
}

Custom Width Bounds

import * as React from 'react';
import { Bounding } from '@xsolla/xui-bounding';
import { Input } from '@xsolla/xui-input';

export default function CustomBounds() {
  return (
    <Bounding minWidth={200} maxWidth={500}>
      <Input placeholder="Custom bounds" />
    </Bounding>
  );
}

Flexible (Inline) Mode

import * as React from 'react';
import { Bounding } from '@xsolla/xui-bounding';
import { Button } from '@xsolla/xui-button';

export default function FlexibleBounding() {
  return (
    <Bounding flexible>
      <Button>Inline Button</Button>
    </Bounding>
  );
}

Minimal Width

import * as React from 'react';
import { Bounding } from '@xsolla/xui-bounding';
import { Tag } from '@xsolla/xui-tag';

export default function MinimalBounding() {
  return (
    <Bounding minimal>
      <Tag>Minimal width</Tag>
    </Bounding>
  );
}

Anatomy

import { Bounding } from '@xsolla/xui-bounding';

<Bounding
  flexible={false}        // Use inline-flex display
  minimal={false}         // Allow auto min-width
  minWidth={140}          // Minimum width (px)
  maxWidth={400}          // Maximum width (px)
>
  <Content />
</Bounding>

Examples

Form Layout

import * as React from 'react';
import { Bounding } from '@xsolla/xui-bounding';
import { Input } from '@xsolla/xui-input';
import { Select } from '@xsolla/xui-select';
import { Button } from '@xsolla/xui-button';

export default function FormLayout() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
      <Bounding>
        <Input label="Name" placeholder="Enter your name" />
      </Bounding>
      <Bounding>
        <Input label="Email" placeholder="Enter your email" />
      </Bounding>
      <Bounding>
        <Select
          label="Country"
          options={['United States', 'Canada', 'Mexico']}
        />
      </Bounding>
      <Bounding>
        <Button>Submit</Button>
      </Bounding>
    </div>
  );
}

Responsive Constraints

import * as React from 'react';
import { Bounding } from '@xsolla/xui-bounding';
import { Input } from '@xsolla/xui-input';

export default function ResponsiveConstraints() {
  return (
    <div style={{ display: 'flex', gap: 16 }}>
      <Bounding minWidth={100} maxWidth={200}>
        <Input placeholder="Small" />
      </Bounding>
      <Bounding minWidth={200} maxWidth={400}>
        <Input placeholder="Medium" />
      </Bounding>
      <Bounding minWidth={300} maxWidth={600}>
        <Input placeholder="Large" />
      </Bounding>
    </div>
  );
}

API Reference

Bounding

Bounding Props:

| Prop | Type | Default | Description | | :--- | :--- | :------ | :---------- | | children | ReactNode | - | Content to constrain. | | flexible | boolean | false | Use inline-flex instead of flex display. | | minimal | boolean | false | Set min-width to auto instead of default. | | minWidth | number | 140 | Minimum width in pixels. | | maxWidth | number | 400 | Maximum width in pixels. |

Behavior

• Default: flex column layout with min-width 140px, max-width 400px
• flexible: Changes to inline-flex for inline placement
• minimal: Removes minimum width constraint (auto)
• Content fills available width within bounds