ReactJS Components

⚠️ Notice ⚠️

This package is no more supported. Continued, in a more professional way: QuickBlocksUI

Description

Repository of components that I created in several projects and seemed interesting to me. I encourage you to use and share your observations. each component includes a readme file with explanations and instructions to make it easy to use. They are created in a simple way and accompanied by an extensive point-by-point manual.

Installation

npm i @tehaque/react.js-components

current stable version: v1.0.16

Contents

• Parallax
• Slider with depth

---

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 '@tehaque/react.js-components';

• 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:

Slider with timer

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 '@tehaque/react.js-components';

• 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}/>

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.

---

Source files are in the version branch