@qubixstudio/sphere
v1.0.34
Published
This React TypeScript library provides a set of powerful hooks and components for managing and handling various aspects of responsive design in your applications.
Downloads
122
Maintainers
Readme
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 sourceformats
: An optional set of image sources for different resolutionsalt
: A description of the imagerefs
: takes ref from parent componentonImageLoaded
: 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 //