@clds/style-utils

@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