canvas-component-utils

Render HTML content and images with React Canvas component utilities.

14|2|Updated Feb 14, 2025
One-click install
npx skills add https://github.com/balintbrews/canvas-starter --skill canvas-component-utils-balintbrews
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: canvas-component-utils
Source: https://github.com/balintbrews/canvas-starter/tree/main/.agents/skills/canvas-component-utils
Command: npx skills add https://github.com/balintbrews/canvas-starter --skill canvas-component-utils-balintbrews

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Provides reusable utilities to render formatted HTML content and images consistently across Canvas components, reducing boilerplate and improving accessibility.

Core Features & Use Cases

  • FormattedText: render HTML content from props where contentMediaType is text/html.
  • Image: render responsive images with src, alt, width, height.
  • Import and compose: combine utilities from drupal-canvas in Canvas components for predictable UI.

Quick Start

Import the FormattedText and Image components from drupal-canvas in your Canvas component to start rendering rich HTML content and images.

Frequently Asked Questions about canvas-component-utils

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I render HTML content in React Canvas components consistently?▼

To render HTML content in React Canvas components, import the FormattedText utility from the drupal-canvas package to display props where contentMediaType is text/html, ensuring consistent rendering and reducing boilerplate.

What is the drupal-canvas package used for in web development?▼

The drupal-canvas package provides reusable UI utilities like FormattedText and Image for Canvas components, enabling developers to render formatted HTML content and responsive images predictably across React-based interfaces.

How do I display responsive images with src and alt attributes in Canvas?▼

To display responsive images in Canvas, import the Image utility from drupal-canvas and pass src, alt, width, and height props directly to the component for consistent image rendering and accessibility.

Does this Canvas component utility require any specific dependencies?▼

Yes, rendering HTML and images with these Canvas component utilities requires the drupal-canvas package as a dependency, which exposes the necessary FormattedText and Image components for your React project.

Can I use these utilities to improve accessibility when rendering text/html?▼

Yes, you can improve accessibility when rendering text/html by using the FormattedText utility from drupal-canvas, which is designed to render HTML content from props consistently while maintaining accessibility standards.

What is the best way to reduce boilerplate when rendering formatted text in React?▼

The best way to reduce boilerplate when rendering formatted text in React is to import and compose the FormattedText utility from drupal-canvas in your Canvas components to handle text/html props predictably.