Component documentation
SGUI / Development
Supply host translations, ICU values and locale with deterministic English fallbacks.
Loading examples…
Loading examples…
Loading examples…
No fixed SGUI child components.
No direct parents in the documented component catalog.
1 step completed
Host lookup failures and missing markers fall back to the English defaultMessage. Catalogs are local; namespace registration does not fetch data.
1 step completed
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { SGTranslationProvider, useTranslation, formatIcuMessage, type SGTranslationAdapter } from '@structured-growth/sg-ui';
import { Button } from '@structured-growth/sg-ui/components';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
export default function translationAdapterExample() {
const [count,setCount]=useState(1);
const [locale]=useState<string>("en-US");const [mode]=useState<string>("Fallback");
const namespaces=new Set<string>();
const adapter:SGTranslationAdapter={locale,useNamespace:namespace=>{namespaces.add(namespace);},t:(key,options)=>{if(mode==='Throw lookup error')throw new Error('Simulated translation failure');if(mode==='Return missing marker')return '[[missing_translation]]';if(mode==='Expanded labels')return '⟦'+formatIcuMessage(options.defaultMessage,locale,options.values)+' — expanded label⟧';const translated=mode==='Translated'&&locale==='es-ES'?(key==='demo.label'?'Abrir curso':key==='demo.progress'?'{count, plural, one {# paso completado} other {# pasos completados}}':options.defaultMessage):options.defaultMessage;return formatIcuMessage(translated,locale,options.values);}};
function TranslationConsumer(){const {t}=useTranslation();return <Stack gap={3}><Button onPress={()=>setCount(n=>n+1)}>{t('demo.label',{defaultMessage:"Open course",namespace:'demo'})}</Button><Typography role="status">{t('demo.progress',{defaultMessage:'{count, plural, one {# step completed} other {# steps completed}}',namespace:'demo',values:{count}})}</Typography></Stack>;}
return (
<>
<ThemeScope density="comfortable"><SGTranslationProvider value={adapter}><TranslationConsumer/></SGTranslationProvider></ThemeScope>
</>
);
}
Host lookup failures and missing markers fall back to the English defaultMessage. Catalogs are local; namespace registration does not fetch data.
1 step completed
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { SGTranslationProvider, useTranslation, formatIcuMessage, type SGTranslationAdapter } from '@structured-growth/sg-ui';
import { Button } from '@structured-growth/sg-ui/components';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
export default function translationAdapterExample() {
const [count,setCount]=useState(1);
const [locale]=useState<string>("en-US");const [mode]=useState<string>("Fallback");
const namespaces=new Set<string>();
const adapter:SGTranslationAdapter={locale,useNamespace:namespace=>{namespaces.add(namespace);},t:(key,options)=>{if(mode==='Throw lookup error')throw new Error('Simulated translation failure');if(mode==='Return missing marker')return '[[missing_translation]]';if(mode==='Expanded labels')return '⟦'+formatIcuMessage(options.defaultMessage,locale,options.values)+' — expanded label⟧';const translated=mode==='Translated'&&locale==='es-ES'?(key==='demo.label'?'Abrir curso':key==='demo.progress'?'{count, plural, one {# paso completado} other {# pasos completados}}':options.defaultMessage):options.defaultMessage;return formatIcuMessage(translated,locale,options.values);}};
function TranslationConsumer(){const {t}=useTranslation();return <Stack gap={3}><Button onPress={()=>setCount(n=>n+1)}>{t('demo.label',{defaultMessage:"Open course",namespace:'demo'})}</Button><Typography role="status">{t('demo.progress',{defaultMessage:'{count, plural, one {# step completed} other {# steps completed}}',namespace:'demo',values:{count}})}</Typography></Stack>;}
return (
<>
<ThemeScope density="compact"><SGTranslationProvider value={adapter}><TranslationConsumer/></SGTranslationProvider></ThemeScope>
</>
);
}
Host lookup failures and missing markers fall back to the English defaultMessage. Catalogs are local; namespace registration does not fetch data.
1 paso completado
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { SGTranslationProvider, useTranslation, formatIcuMessage, type SGTranslationAdapter } from '@structured-growth/sg-ui';
import { Button } from '@structured-growth/sg-ui/components';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
export default function translationAdapterExample() {
const [count,setCount]=useState(1);
const [locale]=useState<string>("es-ES");const [mode]=useState<string>("Translated");
const namespaces=new Set<string>();
const adapter:SGTranslationAdapter={locale,useNamespace:namespace=>{namespaces.add(namespace);},t:(key,options)=>{if(mode==='Throw lookup error')throw new Error('Simulated translation failure');if(mode==='Return missing marker')return '[[missing_translation]]';if(mode==='Expanded labels')return '⟦'+formatIcuMessage(options.defaultMessage,locale,options.values)+' — expanded label⟧';const translated=mode==='Translated'&&locale==='es-ES'?(key==='demo.label'?'Abrir curso':key==='demo.progress'?'{count, plural, one {# paso completado} other {# pasos completados}}':options.defaultMessage):options.defaultMessage;return formatIcuMessage(translated,locale,options.values);}};
function TranslationConsumer(){const {t}=useTranslation();return <Stack gap={3}><Button onPress={()=>setCount(n=>n+1)}>{t('demo.label',{defaultMessage:"A host-defined destination with a longer descriptive label",namespace:'demo'})}</Button><Typography role="status">{t('demo.progress',{defaultMessage:'{count, plural, one {# step completed} other {# steps completed}}',namespace:'demo',values:{count}})}</Typography></Stack>;}
return (
<>
<ThemeScope density="comfortable"><SGTranslationProvider value={adapter}><TranslationConsumer/></SGTranslationProvider></ThemeScope>
</>
);
}