--- name: content-rendering description: "WHAT: Safe HTML rendering with RenderSanitizedHTML and XSS prevention. WHEN: rendering CMS content, translated HTML, user-generated rich text. KEYWORDS: html, render, sanitize, xss, RenderSanitizedHTML, sanitize-html, truncation, content." --- # Content Rendering ## Documentation This skill has comprehensive documentation: - **[Production Examples](.\/references\/examples.md)** - Real-world code examples from the codebase - **[API Reference](.\/references\/api-docs.md)** - Complete API documentation with official links - **[Implementation Patterns](.\/references\/patterns.md)** - Best practices and anti-patterns ## Core Principles **Always sanitize HTML before rendering.** User-generated HTML content must pass through sanitize-html before rendering with react-native-render-html. Never render unsanitized HTML directly - this prevents XSS attacks and malicious script injection. **Always wrap RenderSanitizedHTML with ErrorBoundary.** HTML rendering can fail for malformed content or edge cases. ErrorBoundary ensures graceful degradation without crashing the entire app. **Always sanitize before truncating.** Security comes before UX. The order is: (1) sanitize HTML to remove dangerous content, (2) truncate to maxWords limit, (3) render. This ensures malicious content is removed even if truncation fails. **Always use custom sanitization configs for specific content types.** Different content types need different sanitization rules. Marketing content may allow more tags than user comments. Define allowedTags and allowedAttributes explicitly for each use case. **Why**: Safe HTML rendering enables rich text content (bold, italic, lists, links) from CMS and translations, prevents security vulnerabilities through XSS prevention, provides flexible content truncation for long text, and maintains app stability through error boundaries. ## When to Use This Skill Use these patterns when: - Rendering HTML content from CMS or feature content APIs - Displaying translated strings that contain HTML formatting (bold, italic, lists) - Showing user-generated content with rich text formatting - Rendering product descriptions or marketing copy with HTML - Displaying sustainability information or educational content - Rendering recipe instructions or cooking tips with formatting - Showing upsell messages or promotional content from backend - Building empty states with formatted body text - Implementing "read more" truncation for long HTML content - Rendering email templates or notification messages with HTML ## RenderSanitizedHTML Component ### Basic Usage Use RenderSanitizedHTML for safe HTML rendering with default sanitization. ```typescript import { RenderSanitizedHTML } from '@libs\/render-sanitized-html'; const ProductDescription = ({ product }) => { return ( <\/View> ); }; ``` **Why**: RenderSanitizedHTML wraps react-native-render-html with automatic sanitization. Default config removes dangerous tags (script, iframe) while preserving safe formatting (p, strong, em, ul, li). ErrorBoundary handles rendering failures gracefully. **Production Example**: `modules\/social-recipe-bridge\/screens\/social-recipe-bridge\/components\/empty-state\/EmptyStateView.tsx:22` ### Component API RenderSanitizedHTML accepts four props: source, style, config, maxWords. ```typescript Hello World<\/strong><\/p>' }} style={styles.bodyText} config={{ allowedTags: ['p', 'br', 'strong', 'em'], allowedAttributes: {}, }} maxWords={50} \/> ``` **Props:** - `source` - Required. Object with `html` string property (HTMLSourceInline type from react-native-render-html) - `style` - Optional. Custom styles merged with baseStyle from Zest theme (MixedStyleDeclaration type) - `config` - Optional. Custom sanitization rules (sanitize.IOptions type from sanitize-html) - `maxWords` - Optional. Maximum word count before truncation with ellipsis **Why**: source prop matches react-native-render-html API for consistency. style prop enables Zest theme integration. config prop allows custom sanitization per use case. maxWords enables "read more" patterns. ### With Custom Styling Merge custom styles with Zest theme for branded typography. ```typescript import { useZestStyles } from '@zest\/react-native'; import { RenderSanitizedHTML } from '@libs\/render-sanitized-html'; const MarketingBanner = ({ content }) => { const styles = useZestStyles(stylesConfig); return ( ); }; const stylesConfig = createStylesConfig((theme) => ({ bodyText: { color: theme.colors.alias.text.secondary, fontSize: theme.typography['body-md-regular'].fontSize, lineHeight: theme.typography['body-md-regular'].lineHeight, }, })); ``` **Why**: Custom styles enable brand-consistent typography while preserving HTML formatting. Zest theme tokens ensure visual consistency across features. Style merging combines theme defaults with custom overrides. **Production Example**: `modules\/store\/screens\/cart\/components\/upsell-nudge-button\/UpsellNudgeButton.tsx:40` ## HTML Sanitization ### Default Sanitization RenderSanitizedHTML uses sanitize-html default config for basic security. ```typescript \/\/ Automatically sanitizes: \/\/ ❌ Removes: