Responsive

Easily manage values that can be set per-breakpoint.

Note

If using Frontend libs (that has one attribute per breakpoint), use the ResponsiveLegacy component.

<Responsive
	icon={icons.fontFamily}
	label='Font family'
	value={value}
	onChange={(value) => setValue(value)}
	options={[
		{ value: 'sans', label: 'Sans-serif' },
		{ value: 'serif', label: 'Serif' },
		{ value: 'mono', label: 'Monospace' },
	]}
	breakpoints={['mobile', 'tablet', 'desktop', 'large']}
	breakpointData={{
		mobile: 480,
		tablet: 960,
		desktop: 1440,
		large: 1920,
	}}
>
	{({ currentValue, handleChange, options }) => (
		<OptionSelect
			options={options}
			onChange={(value) => handleChange(value)}
			value={currentValue}
		/>
	)}
</Responsive>

Tip

In Frontend libs Tailwind you can use the getResponsiveData helper to fetch breakpoint data.

Highlighted props

For the complete list of props, use your IDE's autocomplete functionality.

Inline

<Responsive
	icon={icons.fontFamily}
	label='Font family'
	value={value}
	onChange={(value) => setValue(value)}
	options={[
		{ value: 'sans', label: 'Sans-serif' },
		{ value: 'serif', label: 'Serif' },
		{ value: 'mono', label: 'Monospace' },
	]}
	breakpoints={['mobile', 'tablet', 'desktop', 'large']}
	breakpointData={{
		mobile: 480,
		tablet: 960,
		desktop: 1440,
		large: 1920,
	}}
	inline
>
	{({ currentValue, handleChange, options }) => (
		<OptionSelect
			options={options}
			onChange={(value) => handleChange(value)}
			value={currentValue}
		/>
	)}
</Responsive>

Different control when inline (collapsed view)

Note

Only applies to the control for the default breakpoint.

<Responsive
	icon={icons.fontFamily}
	label='Font family'
	value={value}
	onChange={(value) => setValue(value)}
	options={[
		{ value: 'sans', label: 'Sans-serif' },
		{ value: 'serif', label: 'Serif' },
		{ value: 'mono', label: 'Monospace' },
	]}
	breakpoints={['mobile', 'tablet', 'desktop', 'large']}
	breakpointData={{
		mobile: 480,
		tablet: 960,
		desktop: 1440,
		large: 1920,
	}}
	inline
>
	{({ currentValue, handleChange, options, isInlineCollapsedView }) => (
		<OptionSelect
			options={options}
			onChange={(value) => handleChange(value)}
			value={currentValue}
			type={isInlineCollapsedView ? 'menu' : 'toggleButtons'}
		/>
	)}
</Responsive>

Different control when inline (expanded view)

Note

Only applies to the control for the default breakpoint.

<Responsive
	icon={icons.fontFamily}
	label='Font family'
	value={value}
	onChange={(value) => setValue(value)}
	options={[
		{ value: 'sans', label: 'Sans-serif' },
		{ value: 'serif', label: 'Serif' },
		{ value: 'mono', label: 'Monospace' },
	]}
	breakpoints={['mobile', 'tablet', 'desktop', 'large']}
	breakpointData={{
		mobile: 480,
		tablet: 960,
		desktop: 1440,
		large: 1920,
	}}
	inline
>
	{({ currentValue, handleChange, options, isInlineExpandedView }) => (
		<OptionSelect
			options={options}
			onChange={(value) => handleChange(value)}
			value={currentValue}
			type={isInlineExpandedView ? 'radiosSegmented' : 'toggleButtons'}
		/>
	)}
</Responsive>

Disable desktop-first/mobile-first picker

<Responsive
	icon={icons.fontFamily}
	label='Font family'
	value={value}
	onChange={(value) => setValue(value)}
	options={[
		{ value: 'sans', label: 'Sans-serif' },
		{ value: 'serif', label: 'Serif' },
		{ value: 'mono', label: 'Monospace' },
	]}
	breakpoints={['mobile', 'tablet', 'desktop', 'large']}
	breakpointData={{
		mobile: 480,
		tablet: 960,
		desktop: 1440,
		large: 1920,
	}}
	noModeSelect
>
	{({ currentValue, handleChange, options }) => (
		<OptionSelect
			options={options}
			onChange={(value) => handleChange(value)}
			value={currentValue}
		/>
	)}
</Responsive>

ResponsiveLegacy

Caution

This component is meant to be used in projects that have one attribute per breakpoint, e.g. regular Frontend libs. If using Frontend libs Tailwind, use the Responsive component.

Props are mostly the same as in the Responsive component.

Main differences:

• there is not desktop-first/mobile-first mode switcher
• there is no Responsive preview

<ResponsiveLegacy
	icon={icons.fontFamily}
	label='Font family'
	attribute={manifest.responsiveAttributes.myAttr}
	value={attributes}
	onChange={(attributeName, newValue) => {
		setAttributes({
			...attributes,
			[attributeName]: newValue,
		});
	}}
	options={[
		{ value: 'sans', label: 'Sans-serif' },
		{ value: 'serif', label: 'Serif' },
		{ value: 'mono', label: 'Monospace' },
	]}
	breakpointData={globalManifest.globalVariables.breakpoints}
>
	{({ currentValue, handleChange, options }) => (
		<OptionSelect
			options={options}
			onChange={(value) => handleChange(value)}
			value={currentValue}
		/>
	)}
</ResponsiveLegacy>

Inherited values

The default value that marks an attribute as inherited from the breakpoint above is an empty string. To set a custom one, use the inheritValue prop.

If you need the inherited value to be undefined, set the allowUndefined prop instead.