Text Customization
The Stytch B2B SDK allows you to customize the text in the prebuilt UI through the strings parameter. This feature supports both one-off customizations for specific text changes and comprehensive localization efforts for supporting multiple languages.
ICU MessageFormat
All customizable strings use ICU MessageFormat.
Available Strings
To see all available strings that can be customized, navigate to the @stytch/vanilla-js package in your node_modules and locate the file at:
node_modules/@stytch/vanilla-js/messages/b2b/en.po
This file contains all the default English strings used throughout the B2B SDK and their corresponding keys.
Basic Usage
Pass your custom strings to the StytchB2B component:
import { StytchB2B } from '@stytch/react/b2b';
const customStrings = {
'formField.email.label': 'Work Email Address',
'login.title': 'Welcome Back!',
};
function App() {
return (
<StytchB2B
config={{
products: ['emailMagicLinks', 'oauth', 'passwords'],
emailMagicLinksOptions: {
loginRedirectURL: 'http://localhost:3000/dashboard',
loginExpirationMinutes: 60,
},
}}
strings={customStrings}
/>
);
}
Localization
For complete localization, you can override all strings, then conditionally display the correct string based on the user's locale:
const spanishStrings = {
'login.title': 'Regístrate o inicia sesión',
// ... rest of strings
};
function App() {
return (
<StytchB2B
config={{
products: ['emailMagicLinks', 'oauth', 'passwords'],
emailMagicLinksOptions: {
loginRedirectURL: 'http://localhost:3000/dashboard',
loginExpirationMinutes: 60,
},
}}
// If not provided, the default English strings will be used
strings={locale === 'es' ? spanishStrings : {}}
/>
);
}
Dynamic Content Handling
Some strings include dynamic content, such as the organization name or email address. You can use ICU MessageFormat to format these strings dynamically.
/*
Value in the en.po file:
msgid "organizationLogin.title"
msgstr "Continue to {organizationName}"
*/
const strings = {
'organizationLogin.title': 'Proceed to {organizationName}',
};
Additionally, some strings include special components as part of the string. You can use these components to customize the text inside the component.
/*
Value in the en.po file:
msgid "password.reset.emailSent.resendText"
msgstr "Didn't get it? <resendButton>Resend email</resendButton>"
*/
const strings = {
'password.reset.emailSent.resendText': 'Didn\'t receive the email? <resendButton>Retry</resendButton>',
};
Current Limitations
There are no hardcoded strings in our UI components, and as such they are fully customizable as described above. However, there may be instances where strings are returned from the network (in the case of an API error, zxcvbn feedback, etc) which are not currently customizable. We are actively working to ensure that these are customizable in the future.