useResponsiveProps

View on GitHub

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

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

Basic usage

Select background colour

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

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

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

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

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

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

With multiple props

Select background colour

() => {
  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'
    }}
  />;
}

() => {
  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:

Select background colour

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

      return <div>
        {/* Without the guard below, a request will be made for `undefined?text=hello` */}
        {src && <img alt="" src={`${src}?text=hello`} />}
      </div>;
  }

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

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

      return <div>
        {/* Without the guard below, a request will be made for `undefined?text=hello` */}
        {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.