nice-react-tile

A responsive Tile component for React with styled-components, providing flexible layout with customizable breakpoints, background styling, and advanced layout features.

Installation

npm install nice-react-tile

Peer Dependencies

Make sure you have the following peer dependencies installed:

npm install react react-dom styled-components nice-react-flex

Usage

Basic Usage

import React from 'react'
import Tile from 'nice-react-tile'

const App = () => (
  <Tile>
    <h2>Your Content Here</h2>
    <p>This tile will automatically center and constrain width at large breakpoints.</p>
  </Tile>
)

export default App

With Title and Background

<Tile
  title="Welcome"
  titleAlign="center"
  backgroundColor="#f5f5f5"
>
  <p>Content with a title and background color</p>
</Tile>

With Background Image

<Tile
  backgroundImage="url('/path/to/image.jpg')"
  backgroundPosition="center"
  backgroundSize="cover"
  backgroundAttachment="fixed"
>
  <div>Content with background image</div>
</Tile>

With Split Layout

<Tile
  title="Dashboard"
  contentLeft={<div>Left sidebar content</div>}
  contentRight={<div>Right sidebar content</div>}
>
  <div>Main content area</div>
</Tile>

With Custom Spacing

<Tile spacing="large">
  <div>Content with large spacing between children</div>
</Tile>

// CSS-like shorthand: top/bottom, left/right
<Tile spacing="small base">
  <div>Vertical spacing of "small", horizontal of "base"</div>
</Tile>

// Responsive: per-breakpoint shorthand string (or null to disable)
<Tile
  spacing={{
    small: "small base",
    medium: "base large",
    large: "large larger"
  }}
>
  <div>Spacing changes per breakpoint</div>
</Tile>

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | children | React.ReactNode | - | Content to be rendered inside the tile | | maxWidthTablet | number | 980 | Max-width constraint at tablet viewport | | maxWidthDesktop | number | 1280 | Max-width constraint at desktop viewport | | className | string | - | Custom CSS class name | | style | React.CSSProperties | - | Custom inline styles | | backgroundImage | string | - | Background image (use CSS url() syntax) | | backgroundColor | string | - | Background color | | backgroundPosition | string | "center" | Background image position | | backgroundSize | string | "cover" | Background image size | | backgroundAttachment | string | "fixed" | Background attachment (applied only on landscape orientation) | | title | string \| React.ReactNode | - | Title to display at the top of the tile | | titleAlign | "left" \| "center" \| "right" | "left" | Alignment of the title | | titleColor | string | - | Color of the title text | | contentLeft | React.ReactNode | - | Content for left sidebar (creates split layout) | | contentRight | React.ReactNode | - | Content for right sidebar (creates split layout) | | spacing | GapSize \| SpacingDefinition \| object | - | Spacing between child elements (from nice-react-flex) |

Spacing Types

The spacing prop re-exports FlexSpacingType from nice-react-flex and accepts:

• Shorthand string: 1–4 space-separated gap token names following CSS padding/margin shorthand rules — "small", "small base", "small base large smaller". Token names: none, smaller, small, base, large, larger.
• Responsive object: per-breakpoint shorthand string, or null to disable at that breakpoint. Breakpoint keys: small, medium, large — e.g. { phone: "base", tablet: null, laptop: "small large" }.

Custom Max-Width

You can customize the max-width constraints to match your design system:

<Tile maxWidthTablet={768} maxWidthDesktop={1024}>
  <div>Content with custom max-width constraints</div>
</Tile>

Layout Features

Split Layout

When contentLeft or contentRight props are provided, the tile automatically creates a three-column layout with sidebars and main content area.

Title Display

The title prop can accept either a string or a custom React component, giving you full control over the title appearance.

Default Behavior

• Content is full-width on mobile and tablet
• At the laptop breakpoint (1280px by default), content is constrained to the breakpoint width and centered
• Uses flexbox layout with direction="column" and grow={1}
• Background images use fixed attachment only on landscape orientation for better mobile performance

License

MIT