---
title: "Core — useResponsiveProps"
canonical: https://sky-ui.cf.sky.com/core/hooks/use-responsive-props
apiPackages: [{"name":"@sky-uk/ui-core","representedVersion":"13.2.0"}]
---

# Core — useResponsiveProps

```js
import { useResponsiveProps } from '@sky-uk/ui-core';
```

The `useResponsiveProps` hook can be used to make props respond to different screen sizes.

## Basic usage

```tsx
() => {
  const Example = ({ message: _message }) => {
    const { message } = useResponsiveProps({ message: _message });

    return <div>{message}</div>;
  }

  return <Example message={{ xs: 'goodbye', lg: 'hello' }} />;
}
```

## With multiple props

```tsx
() => {
  const Example = ({ message: _message, message2: _message2, size: _size  }) => {
    const { message, message2, size } = useResponsiveProps({ message: _message, message2: _message2, size: _size });

    return (<ol>
      <li>{message}</li>
      <li>{message2}</li>
      <li>{size}</li>
    </ol>);
  }

  return <Example
    message={{
      xs: 'goodbye',
      lg: 'hello'
    }}
    message2={{
      xs: 'hello',
      md: 'goodbye'
    }}
    size={{
      xs: 'x-small',
      md: 'medium',
      xl: 'x-large'
    }}
  />;
}
```

## Use with asset URLs

When using this hook to switch between asset URLs, if modifying the URL (e.g. to add query params) then you will need to guard against the hook's initial `undefined` return, to avoid unwanted network requests:

```tsx
() => {
  const Example = ({src: _src}) => {
      const { src } = useResponsiveProps({ src: _src });

      return <div>
        
        {src && <img alt="" src={`${src}?text=hello`} />}
      </div>;
  }

  return <Example src={{ xs: 'http://placehold.it/50/50', lg: 'http://placehold.it/100/100' }} />;
}
```

You do not need to guard against the above if using the asset URL returned from the hook "as-is", because React will just omit the `src` attribute altogether when given `undefined`.