@clds/style-utils

This is a utility package that contains helper methods to ease the work with styled-components

media

Available media:

| Breakpoint name | Min width | Max width | | --------------- | --------- | --------- | | phone | 0px | 576px | | tablet | 577px | 768px | | desktop | 769px | 1024px | | wide | 1025px | 1280px |

You should use it when your component should change it's style based on the browser resolution.
This is preffered over using hooks when possible, css is much more performant.
If you use hooks to pass properties to styled components, a new CSS class will be created on each change - this should be avoided.

import { media } from '@clds/style-utils';

const ModalBox = styled.div`
  height: 220px;
  width: 520px;

  @media ${media.tablet()} {
    width: 280px;
  }
`;

By default it will use a range, meaning that if you will use tablet from the example above the media query will be as follows:

(min-width: <MOBILE_RESOLUTION>) and (max-width: <TABLET_RESOLUTION>)

You can use the options in the following way to allow different behaviors:

import { media } from '@clds/style-utils';

const ModalBox = styled.div`
  height: 220px;
  width: 520px;

  @media ${media.tablet({ minOnly: true })} {
    width: 280px;
  }
`;

Because only the query body is generated you will have full intellisense support from IDE in it's content. (hence @media is used, to prevent breaking out from styled component template)
Additional benefit is that you can combine the queries:

import { media } from '@clds/style-utils';

const ModalBox = styled.div`
  height: 220px;
  width: 520px;

  @media ${media.tablet({ minOnly: true })} and ${media.wide({
      maxOnly: true,
    })} {
    width: 280px;
  }
`;

Usage with Hooks

import { useDesktop, usePhone } from '@clds/style-utils';

const View = () => {
  const isPhone = usePhone();
  const isDesktopAndBelow = useDesktop({ maxOnly: true });

  if (isPhone) return <div>This is phone</div>;
  if (isDesktopAndBelow) return <div>This is desktop, tablet or phone</div>;
  return <div>This is above desktop</div>;
};

Available Hooks

• usePhone
• useTablet
• useDesktop
• useWide

Options

| Name | Type | Description | default | | ------- | ------- | -------------------------------------- | ------- | | maxOnly | boolean | Media query will only have max-width | false | | minOnly | boolean | Media query will only have min-width | false |

checkerboard

A function that returns a checkerboard background style

Options

| Name | Type | Description | default | | ------ | ------ | ----------------------------------- | ----------- | | color1 | string | The first color to use | - | | color2 | string | The second color to use | transparent | | size | number | The size (in pixels) of the squares | 15 |

createStylesheetsFromUrls

A function that creates stylesheet link elements from given urls and appends them to document head.

To identify these link elements, a custom attribute is been added (cld-dynamic-stylesheet). This allows recycling existing link elements by replacing their href when needed, and disposing un-necessary link elements.

For the given input -

import { createStylesheetsFromUrls } from '@clds/style-utils';

const urls = ['https://some-style-sheet.com'];

createStylesheetsFromUrls(urls);

Output will be -

<link
  href="https://some-style-sheet.com"
  rel="stylesheet"
  cld-dynamic-stylesheet="cld"
/>

Versioning

This library follows Semantic Versioning.

License

See LICENSE