Pikas Utils

@pikas-utils/screen

This package contains a avatar component.

Change Log

Installation

You can install this package using npm, yarn, or pnpm.

npm install @pikas-utils/screen

yarn add @pikas-utils/screen

pnpm add @pikas-utils/screen

Usage

useWindowSize

Use this hook to get the window size.

This hook comes from usehooks-ts library.

The current window dimensions are: {}

import { useWindowSize } from '@pikas-utils/screen';

const Example: React.FC = () => {
  const { width, height } = useWindowSize();

  return (
    <div>
      The current window dimensions are:{' '}
      <code>{JSON.stringify({ width, height })}</code>
    </div>
  );
};

useMediaScreen

Use this hook to know the screen media in relation to the window size.

The current media screen is: 2xl

import { useWindowSize } from '@pikas-utils/screen';

const Example: React.FC = () => {
  const media = useMediaScreen();

  return (
    <div>
      The current media screen is: <b>{media}</b>
    </div>
  );
};

useMediaScreenValid

Use this hook to find out if the screen media is valid for the current screen.

Media screen: mdOperator: >Media valid: false

import { useMediaScreenValid } from '@pikas-utils/screen';

const Example: React.FC = () => {
  const mediaValid = useMediaScreenValid({ media: 'md', operator: '>' });

  return (
    <div>
      <span>
        Media screen: <b>md</b>
      </span>
      <span>
        Operator: <b>&gt;</b>
      </span>
      <span>
        Media valid: <b>{mediaValid ? 'true' : 'false'}</b>
      </span>
    </div>
  );
};

getMediaByScreenSize

import { getMediaByScreenSize } from '@pikas-utils/screen';

const size: number = 1200;
getMediaByScreenSize(size);
// 'xl'

getScreenSizeByMedia

import { getScreenSizeByMedia } from '@pikas-utils/screen';

const media: Medias = 'md';
getScreenSizeByMedia(media);
// 768

Contributing

This documentation can be edited on GitHub here