# useBreakpoint

The `useBreakpoint()` hook can be used to return different values depending on the width of the screen.

Its value can change with each render.

## Usage

```jsx
import { View, Text } from 'react-native';

import { useBreakpoint } from './useBreakpoint';

function MyComponent() {
  const breakpointContainerInlineStyles = useBreakpoint(
    // The first parameter is the default value, which is used for the mobile breakpoint,
    {
      backgroundColor: 'red',
      color: 'white',
    },
    // The second parameter is an object with attributes for each breakpoint,
    // the current breakpoint's value will be returned from the hook.
    {
      largeDesktop: {
        backgroundColor: 'blue',
        color: 'white',
      },
      desktop: {
        flex: 1,
        backgroundColor: 'green',
        color: 'white',
      },
      tablet: {
        backgroundColor: 'yellow',
        color: 'black',
      },
      largeMobile: {
        backgroundColor: 'black',
        color: 'white',
      },
      mediumMobile: {
        backgroundColor: 'white',
        color: 'black',
      },
    },
  );

  // In this example, we return the name of the current breakpoint,
  // return values can be any type, but they have to be the same type
  // for the `defaultValue` and each of the breakpoints' values.
  const currentBreakpoint = useBreakpoint('mobile', {
    largeDesktop: 'largeDesktop',
    desktop: 'desktop',
    tablet: 'tablet',
    largeMobile: 'largeMobile',
    mediumMobile: 'mediumMobile',
  });

  return (
    <View style={breakpointContainerInlineStyles}>
      <Text>{`Your device fits the ${currentBreakpoint} breakpoint.`}</Text>
    </View>
  );
}
```