Skip to main content

Recipes

Handle singular/plural forms automatically based on count.
import { useString } from '@stringboot/web-sdk/react';

function CartSummary({ itemCount }) {
  // Key: "cart_summary"
  // Value: "{count, plural, =0 {Cart is empty} one {# item in cart} other {# items in cart}}"
  const summary = useString('cart_summary', { count: itemCount });

  return <p>{summary}</p>;
}
Format dates according to the current locale.
import { useLocale } from '@stringboot/web-sdk/react';

function OrderDate({ date }) {
  const { locale } = useLocale();
  
  const formattedDate = new Intl.DateTimeFormat(locale, {
    dateStyle: 'long',
    timeStyle: 'short'
  }).format(new Date(date));

  return <span>Ordered on: {formattedDate}</span>;
}
Safely render HTML content stored in your strings.
import { useString } from '@stringboot/web-sdk/react';

function PromoBanner() {
  // Value: "Get <b>50% off</b> on all <i>summer items</i>!"
  const promoText = useString('promo_banner_html');

  return <div dangerouslySetInnerHTML={{ __html: promoText }} />;
}