fluid-content

📏 React/Vue component to auto scale content proportionally based on the parent width.

Install

npm install fluid-content

React

React demo

import { Fluid } from 'fluid-content/react'

<Fluid base={1000}>
  ...
</Fluid>

Vue

Vue demo

import { Fluid } from 'fluid-content/vue'

<Fluid :base="1000">
  ...
</Fluid>

Breakpoints

You can provide an array of base values to create responsive breakpoints:

import { Fluid } from 'fluid-content/react'

<Fluid base={[400, 800, 1200]}>
  ...
</Fluid>

The first value takes precedence. So in this case if the parent element is 600px wide, the content will scale using base = 400. You can flip this behavior by putting the values from high to low ([1200, 800, 400]).

You can also pass Infinity to indicate that the content shouldn't scale after a given breakpoint:

import { Fluid } from 'fluid-content/react'

// Only scale below a parent width of 1200px
<Fluid base={[1200, Infinity]}>
  ...
</Fluid>