QuickBlocksUI by TwoHandStudio

Description

This package contains a set of custom React components that can be used to build modern and responsive user interfaces. The package includes a range of UI elements, such as buttons, forms, alerts, modals, and more, that are easy to integrate into any React project. Each component is designed to be highly customizable and reusable, with extensive documentation and examples to help developers get started quickly. With this package, you can save time and effort in building UI components from scratch, and focus on creating the core features of your application.

Installation

npm i @twohandstudio/quickblocksui

Contents

• Parallax
• Default Slider
• Slider

Parallax

This component will work for uniform images divided into several planes. Specifically, it is created to evoke the impression of depth. Should be used on full width of page as a background. It will usually require styling, as it's mostly about showing the component working in react rather than putting a ready-made style to the component. A basic style is created to make it work properly.

For the component to work properly:

• import like any Component:

import { Parallax } from "@twohandstudio/quickblocksui";

• import images (or just pass it straight to table)

 import B1 from './image1.png';
 .
 import B4 from './image4.png';

• create one state with your images and depth you want (for example):

const [images, setImages] = useState([
  [B4, 0.05],
  [B3, 0.1],
  [B2, 0.2],
  [B1, 0.25],
]);

• pass it to Component:

<Parallax images={images} />

Additional instructions

• It is required to manually divide the image into several parts (necessarily save as PNG), import them as B4, B3 etc.
• Optionally, you can add a background image and several objects.
• You can change the depth value for each image which will change the speed at which it moves.
• Images are first imported and then added to the image state with depth, which gives you the ability to dynamically change them.

Below is a picture showing an example of a mountain landscape divided into 4 elements:

Default Slider

A simple slider that changes the photo every 20 seconds. Slider can be dynamically changed by the user to any slide by clicking on the button. You can add many photos, buttons to change will be created automatically. You can also add fields such as title or description to the sliderList table and place them somewhere on the page, similarly to photos in a slider.

For the component to work properly:

• import like any Component:

import { Slider } from "@twohandstudio/quickblocksui";

• create one variable or state (for example):

const sliderList = [
  {
    id: 0,
    img: "https://picsum.photos/1920/1080?random=1",
  },
  {
    id: 1,
    img: "https://picsum.photos/1920/1080?random=2",
  },
];

• pass it to Component:

<Slider sliderList={sliderList} />

• also you can now change slide display time by adding (example for 20 sec):

<Slider sliderList={sliderList} animDuration={20} />

Additional instructions

• It is required to style the elements, because the base style I created may not work in some projects. it all depends on where you will be using it and what your project requires.
• If you change slide display time, don't forget to change the aniamtion-duration value in the animate class to the time you want the slide to last.

Slider

Description

Offers the same functionality as the Default Slider but with added compatibility and the ability to easily customize its styles. With smooth sliding and seamless value selection, this slider enhances the user experience while seamlessly integrating into any project.

All possible methods of customization and styling changes

https://quickblocks.gatsbyjs.io/Examples/Slider/