Sphere

This React TypeScript library provides a set of powerful hooks and components for managing and handling various aspects of responsive design in your applications. It includes the following hooks:

• useAspectRatio
• useIsMounted
• useWindowSize

Additionally, this library contains a ResponsiveImage component that simplifies the process of rendering responsive images in your applications.

Appendix

• Installation
• Usage
  • useAspectRatio
  • useIsMounted
  • useWindowSize
  • ResponsiveImage
• Examples
• Contributing
• License

Installation

Install the package using npm or yarn:

  npm install sphere

or

yarn add sphere

Usage

useAspectRation

This hook returns the current aspect ratio of a given DOM element, which can be useful for handling responsive designs.

import { useAspectRatio } from 'sphere';

const aspectRatioSize = useAspectRatio(aspectRatio: number, mode: AspectRatioMode, ref: RefObject<HTMLElement> | undefined);

Modes:

enum AspectRatioMode {
  widthFromHeight,
  heightFromWidth,
}

useIsMounted

This hook returns a boolean value that indicates whether a component is currently mounted. This can be helpful for managing asynchronous tasks and avoiding memory leaks when a component is unmounted.

import { useIsMounted } from 'sphere';

const isMounted = useIsMounted();

useWindowSize

This hook returns the current window size as an object with width and height properties. It automatically updates when the window is resized.

import { useWindowSize } from 'sphere';

const windowSize = useWindowSize();

ResponsiveImage

This component simplifies the process of rendering responsive images by handling different image sources, formats, and sizes. It accepts the following props:

• src: The primary image source
• formats: An optional set of image sources for different resolutions
• alt: A description of the image
• refs: takes ref from parent component
• onImageLoaded: function calls when image is loaded

import { ResponsiveImage } from 'sphere';

<ResponsiveImage
  src="/path/to/image.jpg"
  formats={imageFormats}
  alt="An example image"
  refs={ref}
  onImageLoaded={()=>console.log("image loaded")}
/>

formats type:

type ImageFormats = {
  large?: ImageInfo;
  small?: ImageInfo;
  medium?: ImageInfo;
  thumbnail?: ImageInfo;
};

type ImageInfo = {
  ext: string;
  url: string;
  hash: string;
  mime: string;
  name: string;
  path: string | null;
  size: number;
  width: number;
  height: number;
};

Examples

import React, { useRef } from 'react';
import { useAspectRatio, useIsMounted, useWindowSize, ResponsiveImage } from 'sphere';

function ExampleComponent() {
  const containerRef = useRef(null);
  const aspectRatio = useAspectRatio(containerRef);
  const isMounted = useIsMounted();
  const windowSize = useWindowSize();

  return (
    <div ref={containerRef}>
      <p>Aspect ratio: {aspectRatio}</p>
      <p>Component is mounted: {isMounted.toString()}</p>
      <p>Window size: {windowSize.width}x{windowSize.height}</p>

      <p>Responsive Image example:</p>
        <ResponsiveImage
          src="/path/to/image.jpg"
          formats={imageFormats}
          alt="An example image"
          refs={ref}
          onImageLoaded={()=>console.log("image loaded")}
        />
    </div>

SEO

Using to provide seo tags for each page. Data are download from strapi in predefined formats. It using async helmet library to change header (we need this because data comming from BE). For work you need wrap your app to helmet context.

  <HelmetProvider>
    <Seo seo={seo as SeoComponent}/>
  </HelmetProvider>

Contributing

We welcome contributions to this project! Please follow these steps:

1. Fork the repository.
2. Create a new branch with a descriptive name for your changes.
3. Make your changes and commit them to your branch.
4. Submit a pull request with a description of the changes and any relevant issues.

Before submitting a pull request, please ensure that your code follows the project's coding standards and that all tests pass.

License

MIT //