No Preview

Sorry, but you either have no stories or none are selected somehow.

If the problem persists, check the browser console, or the terminal you've run Storybook from.

The component failed to render properly, likely due to a configuration issue in Storybook. Here are some common causes and how you can address them:

  1. Missing Context/Providers: You can use decorators to supply specific contexts or providers, which are sometimes necessary for components to render correctly. For detailed instructions on using decorators, please visit the Decorators documentation.
  2. Misconfigured Webpack or Vite: Verify that Storybook picks up all necessary settings for loaders, plugins, and other relevant parameters. You can find step-by-step guides for configuring Webpack or Vite with Storybook.
  3. Missing Environment Variables: Your Storybook may require specific environment variables to function as intended. You can set up custom environment variables as outlined in the Environment Variables documentation.

Frame

The Frame component is useful for cropping content, typically media, to a desired aspect ratio.

Examples

Some examples of where you might use a component:

Installation and Import

First, you must install @bedrock-layout/css.

yarn add @bedrock-layout/css

Then, you can import the entire CSS or just the component's CSS in your project:

import "@bedrock-layout/css/lib/bedrock-layout.min.css";
// or
import "@bedrock-layout/css/lib/components/frame.min.css";

Optionally, you can install the package for your framework of choice (React.js, Solid.js) using your favorite package manager CLI:

## For React.js
yarn add @bedrock-layout/frame
  ## or
yarn add @bedrock-layout/primitives

## For Solid.js
yarn add @bedrock-layout/solid

Then import the component in your project:

// For React.js
import { Frame } from '@bedrock-layout/frame'
  // or
import { Frame } from '@bedrock-layout/primitives'

// For Solid.js
import { Frame } from '@bedrock-layout/solid'

API

computer with data
NameDescriptionDefaultControl
ratio
string
-
children
object
--
as
unknown
"div"
style
unknown
{}
position
-
-

Ratio As String

The ratio prop takes a string the is in the format of ${number}/${number}, which represents the ratio of width to height of the desired aspect ratio. The React and Solid components also accept a string value in the format of ${number}:${number}.

Usage examples

// CSS
<div data-br-frame style={{ "--ratio": "4/3" }}>
  <img src={imgSrc} alt="computer with data" />
</div>

// React.js and Solid.js
<Frame ratio="16/9">
 <Component />
</Frame>

In the example below, the frame will maintain a 16:9 aspect ratio and will crop the image to fit.

computer with data

Ratio As Array

The React and Solid components also accept a ratio prop as an tuple array of two numbers, which represent the ratio of width to height of the desired aspect ratio.

Usage examples

// React.js and Solid.js
<Frame ratio="16/9">
 <Component />
</Frame>

In the example below, the frame will maintain a 4:3 aspect ratio and will crop the image to fit, but the image will be positioned at the top-left of the frame.

computer with data

Without An Aspect Ratio

You can also use the Frame without a ratio. This will allow you to specify the width and height of the frame, while still taking advantage of the cropping functionality.

Usage examples

// CSS
<div data-br-frame style={{ height: "50vh", width: "50%" }}>
  <img src={imgSrc} alt="computer with data" />
</div>

// React.js and Solid.js
<Frame style={{ height: "50vh", width: "50%" }}>
 <Component />
</Frame>

In the example below, the frame's height is set to 50vh and its width is set to 50%. The image will be cropped to fit the frame.

computer with data