DEV Community: Victor Ajadi

Enhance Your React Applications with cards-slider-react-lib : A Feature-Rich Card Slider Library

Victor Ajadi — Sun, 23 Jun 2024 22:26:08 +0000

cards-slider-react-lib: A Customizable and Responsive React Slider Component

The card-slider-react-lib library provides a powerful and versatile React component for creating interactive and visually appealing card sliders in your web applications. This article delves into the features, usage, and customization options offered by card-slider-react-lib.

Key Features:

Responsive Design: card-slider-react-lib automatically adapts the layout to display an optimal number of cards per view based on the user's screen size. This ensures a seamless experience across various devices.
Highly Customizable: The library allows you to define the content of your cards, customize the number of cards displayed per view, and configure various other properties to match your specific requirements. You can even create custom card components for a truly unique look and feel.
Effortless Card Management: card-slider-react-lib efficiently arranges your cards dynamically based on the current index, creating a smooth and continuous sliding effect.
Interactive Navigation: The component comes with built-in navigation buttons that enable users to easily navigate through the cards, either forward or backward. You can also customize the color of these buttons for better integration with your application's design.

Properties (Props) for Customization:

array (Required): This is a mandatory property that takes an array of objects. Each object represents the content of a single card in your slider. The properties within these objects will be available as props in your custom card component.

cardNumPerView (Optional): This prop allows you to control the number of cards displayed per view. It provides manual control over the layout.

autoArrange (Optional, default: false): When enabled, this prop automatically adjusts the number of cards displayed based on the screen size, ensuring responsiveness. It overrides cardNumPerView when set to true.

buttonColor (Optional, default: '#000000'): This prop lets you customize the color of the navigation buttons to match your application's color scheme.

buttonWidth (Optional, default: '54px'): Set the width of the navigation buttons using CSS measurements (e.g., 'px', 'em').

buttonHeight (Optional, default: '54px'): Set the height of the navigation buttons using CSS measurements.

CustomCard: This is where you define your custom card component. It receives any props you pass within the <CardSlider>tag. Refer to the implementation of your CustomCard component for specific prop usage.

LeftSvgIcon (Optional): This prop allows you to override the default left navigation button with your custom SVG icon component.

RightSvgIcon (Optional): Similarly, you can override the default right navigation button with your custom SVG icon component.

slideTimeInterval (Optional, default: 3240): This prop sets the interval (in milliseconds) at which the slider auto-slides in an infinite loop.

allowSlidePerInterval (Optional): When enabled (true), this prop allows the slider to auto-slide without requiring users to click the navigation buttons. It also pauses auto-sliding when the user hovers over the slider, improving performance.

New Update

cardSpacing: this is use to give space to each card or image-card for customized display "gap"

buttonPosition: used to position the button around the slider, middle or middle-bottom or middle-top , default positioned at the right and left end of the slider container.

buttonPositionGap: when a value is passed here, it gives space to the navigation button relative to the buttonPosition

Custom Card Example

The provided example demonstrates the structure of a custom card component (CustomCard) that you can use with cards-slider-react-lib. This component renders the card content based on the props received from the CardSlidercomponent.

Basic Usage:

The usage section showcases how to integrate the CardSlider component into your React application. It demonstrates how to define card data, customize props, and create a custom card component.

Installation:

To install cards-slider-react-lib, use npm or yarn:

Bash npm install cards-slider-react-lib

Bash yarn add cards-slider-react-lib

Basic Usage:

Here's an example of integrating CardSlider into your React application:

import React from 'react';
import { CardSlider } from 'cards-slider-react-lib';
import CustomCard from './CustomCard'; // Your custom card component

const cardData = [
  { id: 1, title: 'Card 1', content: 'Content 1' },
  { id: 2, title: 'Card 2', content: 'Content 2' },
  { id: 3, title: 'Card 3', content: 'Content 3' },
  // ... more card data
];

function App() {
  return (
    <div className="App">
      <CardSlider
        `array={cardData}`
        `cardNumPerView={3}` // Or use autoArrange={true} for auto- 
        adjustment
        `buttonColor="#ff5733"`
        `buttonWidth="50px"`
        `buttonHeight="50px"`
        `CardComponent={(props) => <CustomCard {...props}
        additionalProp="1" />}`
        `cardSpacing={'30px'}` //this is use to give space to each card or 
        image-card for customized display "gap"
        `buttonPosition={'middle'}` or middle-bottom or middle-top, default 
        positioned at the end of the slider container 
        `buttonPositionGap={'10px'}` //when a value is passed here, it 
        gives space to the navigation button relative to the 
        buttonPosition
        // Other customization options...
      />
    </div>
  );
}

Comparison to Other Card Slider Libraries:

Several React libraries offer card slider functionalities. Here's a brief comparison of cards-slider-react-lib with two popular alternatives:

cs = cards-slider-react-lib rsp=React Swiper rs=React Slick

Feature             cs              rsp           rs
Responsiveness          Yes         Yes       Yes
Customization           High            High          High
Navigation Btn          Built-in    Optional      Optional
Autoplay            Optional    Yes       Yes
Touch Support           Yes         Yes       Yes
Documentation           Moderate    Good          Good
Ease of Use         Moderate    Moderate      Moderate

Additional Details:

Dynamic Screen Size Handling: As mentioned earlier, card-slider-react-lib employs breakpoints to automatically adjust the number of cards displayed per view based on screen size. Here's a breakdown of the default breakpoints:

Extra Small: 1 card
Small: 2 cards
Medium: 3 cards
Large: 4 cards

By leveraging card-slider-react-lib , you can create visually appealing and interactive card sliders that enhance the user experience in your React applications. Its flexibility and customization options allow you to tailor the component to your specific design needs and data structures.

React Video Playback Made Easy: Unleash the Power of the New MVP VideoPlayer Component

Victor Ajadi — Sun, 23 Jun 2024 00:45:28 +0000

Introducing the VideoPlayer Component: A Powerful and Customizable Video Playback Solution for React with Keyboard Navigation

Empowering Your React Applications with Enhanced Video Playback

This project introduces the VideoPlayer component, a robust and configurable video playback solution designed specifically for React applications. It goes beyond basic video display, offering a rich set of features that elevate the user experience and cater to diverse project needs, including built-in keyboard navigation for accessibility.

Key Features and Benefits:

Seamless Integration: Leverages the power of React for effortless incorporation into your application's UI.
Interactive Controls: Provides a wide range of built-in controls, including play/pause, speed adjustment (if supported by the video format), full screen, theater mode, picture-in-picture, caption support, and keyboard navigation.
Customization Flexibility: Empowers developers to tailor the player's functionality by enabling or disabling specific controls as needed.
Streamlined Configuration: Simplifies player setup through intuitive props that control various behaviors.
Subtitle Support: Enhances accessibility and caters to multilingual audiences by allowing subtitle file upload in popular formats like .srt and .vtt.
Customizable Icons: Offers the ability to inject custom SVG icons for backward and forward seek buttons for a cohesive visual experience.
Optional Features: Provides flexibility with optional props like allowFrame for specifying iframe embedding and video preview on timeline hover.
Keyboard Navigation: Supports essential keyboard shortcuts for play/pause, full screen, theater mode, mute, and seeking backward/forward using arrow keys or specific letters (e.g., "j", "l").

Comparison with Other React Video Players:

Several React video player libraries exist, each with its strengths and weaknesses. Here's a brief comparison with a few popular options:

React Player: Offers a wide range of features, including quality selection, autoplay, and custom controls, but might have a steeper learning curve.
Video-React: A lightweight and customizable library with good documentation, but may lack some advanced features like picture-in-picture.
VideoPlayer (This Library): Provides a good balance of features and ease of use, with built-in navigation, subtitle support, and optional iframe embedding. However, it currently doesn't offer functionalities like quality selection or auto-generated captions.

The best choice for your project depends on your specific requirements and priorities. Consider factors like feature set, ease of use, and community support when making your decision.

Installation and Usage:

To install the VideoPlayer library in your React project, use npm:

npm install lib-react-youtube-player

Basic Usage Example:

The following code snippet showcases a basic implementation of the VideoPlayer component within a React application:

// Import VideoPlayer from the library

import { VideoPlayer } from 'lib-react-youtube-player';

// Import the video file

import videoFile from './assets/video/Learn useRef in 11 Minutes.mp4';

function App() {

  return (

    <div className="App">

      {/* Render the VideoPlayer component */}

      <VideoPlayer
        speedbtnProp={true} // Enable speed control button

        fullscreenProp={true} // Enable full screen button

        theaterProp={true} // Enable theater mode button

        pipProp={true} // Enable picture-in-picture button

        captionbtnProp // Enable caption/subtitle button

        backwardBtn={false} // Disable backward seek button

        forwardBtn={false} // Disable forward seek button

        videoFile={videoFile} // Specify the video file path

        allowFrame={true} // Enable iframe embedding (optional)

        LeftBackwardSvgIcon={() => { // Provide custom backward seek SVG here }}

        RightForwardSvgIcon={() => { // Provide custom forward seek SVG here }}

        subtitleFile={'./assets/srt/Learn useRef in 11 Minutes.srt'} // Default subtitle file (optional)

      />

    </div>

  );

}

export default App;

Explanation:

Import Statements: We import the VideoPlayer component from the 'lib-react-youtube-player' library and the video file (Learn useRef in 11 Minutes.mp4) using import statements.

App Component: The App function is the main component of our React application.

Rendering the VideoPlayer: Inside the App component's JSX, we render the VideoPlayer component.

Configuring Props: We configure the VideoPlayer component using various props to enable or disable specific controls, specify the video file, and activate optional features like iframe embedding.

We encourage you to explore the VideoPlayer component further and consider incorporating it into your React projects. If you have any questions or feedback, feel free to reach out to us via email at victorajadi2004@gmail.com or connect with us on LinkedIn www.https://www.linkedin.com/in/zemon-dev/.

Mimicking YouTube Functionality:

The VideoPlayer component aims to offer a similar user experience to YouTube in several aspects, including:

Play/Pause functionality with keyboard shortcuts (spacebar or "k").
Full screen mode toggle with keyboard shortcut ("f").
Theater mode toggle with keyboard shortcut ("t").
Mute toggle with keyboard shortcut ("m").
Seeking backward and forward using arrow keys or specific letters ("j" for 5 seconds backward, "l" for 5 seconds forward).
Subtitle support through user-uploaded .srt and .vtt files, activated by the caption button.

Iframe Preview (Optional):

The VideoPlayer offers the optional allowFrame prop, which enables you to embed the video within an iframe. This can be useful for providing a preview image on the timeline when hovering, similar to YouTube's functionality.

Limitations:

Currently, the library doesn't support video quality selection, unlike YouTube.
It relies on user-uploaded subtitle files and doesn't offer auto-generated captions like YouTube.

We're continuously improving the VideoPlayer component, and these features might be added in future updates.

The VideoPlayer component provides a versatile and user-friendly solution for video playback in your React applications. Its intuitive design, keyboard navigation accessibility, and customizable features make it a valuable asset in your development toolkit. Explore the component further to personalize video experiences and enhance your React projects.