DEV Community: GihanRangana

Building a Dynamic Segmented Layout in React with Framer Motion

GihanRangana — Sun, 02 Nov 2025 21:29:24 +0000

Creating interactive and visually appealing user interfaces is key to a great user experience. Today, we're diving into a custom React component that I've been working on: the SegmentLayout. This component allows you to build a sleek, dual-panel layout where users can switch between different content views with smooth animations.

It's perfect for feature comparisons, interactive tutorials, or any scenario where you need to present segmented information in a clean and engaging way.

Let's break down how it works and how you can use it in your own projects.

What is the `SegmentLayout` Component?

The SegmentLayout is a highly customizable React component that provides a structured layout with three main parts:

A list of clickable items on the left.
A list of clickable items on the right.
A central content area that animates between different views based on the active item.

Check out this quick demo of what it looks like in action:

How to Use It

Using the SegmentLayout is straightforward. You wrap your content views with the main SegmentLayout component and then use the SegmentLayoutContent component for each view you want to display.

Here’s a basic example:

Segment Layout | Shadix UI

pnpm dlx shadcn@latest add @shadix-ui/segment-layout

import {
    SegmentLayout,
    SegmentLayoutContent,
} from "@/components/segment-layout";

const MyComponent = () => (
    <SegmentLayout
        leftItems={[
            { label: "React", value: "react" },
            { label: "Vue", value: "vue" },
        ]}
        rightItems={[
            { label: "Svelte", value: "svelte" },
            { label: "Solid", value: "solid" },
        ]}
        defaultValue="react"
    >
        <SegmentLayoutContent value="react">
            <div>
                <h3>React</h3>
                <p>A JavaScript library for building user interfaces.</p>
            </div>
        </SegmentLayoutContent>
        <SegmentLayoutContent value="vue">
            <div>
                <h3>Vue</h3>
                <p>The Progressive JavaScript Framework.</p>
            </div>
        </SegmentLayoutContent>
        <SegmentLayoutContent value="svelte">
            <div>
                <h3>Svelte</h3>
                <p>Cybernetically enhanced web apps.</p>
            </div>
        </SegmentLayoutContent>
        <SegmentLayoutContent value="solid">
            <div>
                <h3>Solid</h3>
                <p>Simple and performant reactivity for building user interfaces.</p>
            </div>
        </SegmentLayoutContent>
    </SegmentLayout>
);

Core Features

State Management with React Context: The active state is managed globally within the component using React Context, making it easy for child components to know which item is currently selected.
Smooth Animations with Framer Motion: Content transitions are handled by Framer Motion, with animations for height, opacity, and position. This ensures a fluid and professional feel.
Fully Customizable with Tailwind CSS: The component is styled with Tailwind CSS and exposes a classNames prop, allowing you to override every part of the component's appearance.
SEO-Friendly and Accessible: The component is built with semantic HTML and ARIA attributes to ensure it's accessible and indexable.

Key Props

leftItems & rightItems: Arrays of objects to define the clickable items. Each object requires a label and a value.
defaultValue: The value of the item that should be active on initial render.
children: Must be SegmentLayoutContent components.
classNames: An object to pass custom Tailwind CSS classes to different parts of the component.

The SegmentLayoutContent component requires a value prop that corresponds to the value of an item in the leftItems or rightItems arrays.

How It Works: A Look Under the Hood

The component is split into a few key parts:

SegmentLayoutProvider: A React Context provider that holds the active state.
SegmentLayout: The main component that sets up the layout structure.
SegmentLayoutContentInner: The internal component that handles the rendering and animation of the content area. AnimatePresence and motion from Framer Motion are used here to achieve the smooth transitions.
ItemWrapper & Item: Components that render the clickable items on the left and right, with styles for active and disabled states.

The height animation is one of the coolest features. It's achieved by using a ResizeObserver to measure the height of the active content. When the active item changes, the observer detects the new height, and Framer Motion animates the container to match it.

Conclusion

The SegmentLayout component is a powerful and flexible way to create dynamic, segmented layouts in your React applications. With its simple API, smooth animations, and extensive customization options, it can help you build more engaging and intuitive user interfaces.

You can find the full documentation and demo here.

Let me know what you think in the comments below! What other features would you like to see?

Capture Digital Signatures Easily with Shadix UI SignaturePad

GihanRangana — Sat, 01 Nov 2025 10:01:30 +0000

If you’re building modern web apps with React + Tailwind, and need a smooth way to capture user signatures, the Shadix UI SignaturePad component has you covered.

It’s simple, beautiful, and fully compatible with the Shadcn design system — meaning you can integrate it seamlessly into your existing UI.

🚀 Installation

If you already use the shadcn/ui registry, you can add the SignaturePad directly:

pnpm dlx shadcn@latest add @shadix-ui/signature-pad

Then import it into your component file:

import { SignaturePad } from "@/components/ui/signature-pad";

💡 Basic Usage

Here’s a simple example of capturing a signature and handling its save event:

"use client";

import React from "react";
import { SignaturePad } from "@/components/ui/signature-pad";

export default function SignaturePadDemo() {
  const handleSave = (dataUrl: string) => {
    console.log("Signature saved:", dataUrl);
    // send to your backend or store in DB
  };

  return (
    <div className="flex flex-col items-center justify-center p-6">
      <h2 className="text-xl font-semibold mb-4">Sign below 👇</h2>
      <SignaturePad
        penColor="#000"
        lineWidth={3}
        showButtons
        onSave={handleSave}
      />
    </div>
  );
}

You’ll instantly get a clean, responsive canvas with built-in Clear and Save buttons.

⚙️ Props Overview

Prop	Type	Description
`penColor`	`string`	Stroke color for the pen.
`lineWidth`	`number`	Thickness of the drawn line.
`showButtons`	`boolean`	Show default buttons (`Clear`, `Save`).
`onSave`	`(dataUrl: string) => void`	Fires when user saves.
`onChange`	`(dataUrl: string \	null) => void`

🧩 Real-World Use

You can use this component in:

Contract or invoice signing pages 🧾
Consent or approval forms ✅
Kiosk or tablet check-in apps 📱

When a user saves, you get a Base64 image URL, which you can send to your backend and store as an image or file.

🧠 Pro Tip

If you’re using Tailwind CSS, make sure your container has a visible height — otherwise the canvas may collapse.

<div className="h-[300px] w-full border rounded-md">
  <SignaturePad />
</div>

🎯 Final Thoughts

The SignaturePad from Shadix UI gives you a drop-in way to collect digital signatures without extra dependencies or messy setup.

It’s open-source, customizable, and built for modern React apps.

👉 Try it out here: https://shadix-ui.vercel.app/docs/components/signature-pad

Supercharge Your React App: Introducing Shadix UI - The Missing Components for Shadcn/UI

GihanRangana — Thu, 30 Oct 2025 12:49:14 +0000

If you're building with React or Next.js, you've probably heard of the incredible shadcn/ui. It revolutionized how we build component libraries by moving away from traditional packages and towards a copy-paste-and-own-your-code philosophy. It gives us beautiful, accessible, and unopinionated building blocks.

But as our applications grow, we often find ourselves building the same complex components over and over again on top of shadcn/ui's primitives. Think of action buttons, reorderable lists, or even signature pads. These are common needs, but they take significant time to build, test, and maintain.

What if we could extend the shadcn/ui philosophy to these more complex components?

That's why we built Shadix UI.

What is Shadix UI?

Shadix UI is a curated collection of advanced, ready-to-use components built on top of Shadcn/UI and Radix UI. It's designed to seamlessly integrate into your existing projects, saving you hours of development time.

We follow the same principle: you own the code. Just like shadcn/ui, you can use their CLI to add components directly to your codebase, giving you full control to customize them to your heart's content.

A Glimpse of What You Can Build

We're not just talking about styled buttons. Shadix UI provides components that solve real-world UI challenges. Just take a look at those components:

More components are in here

Why Not Just Build Them Myself?

You absolutely could! The beauty of shadcn/ui is that it empowers you to. But building these components takes time. Time for logic, styling, accessibility, and testing. Shadix UI is about community and collaboration. We've done the heavy lifting for you, so you can focus on what makes your application unique.

Think of us as the next layer in your component toolbox—a natural extension of the shadcn/ui ecosystem.

Getting Started

Ready to give it a spin? Head over to our website to browse the components and read the documentation:

shadix-ui.vercel.app

Installation is simple and familiar. You can add components one by one using shadcn CLI, ensuring your project stays lean.

How to Contribute

Shadix UI is an open-source project, and we welcome contributions from the community! Whether you want to fix a bug, add a new component, or improve the documentation, your help is valuable. Check out our Contributing Guide on GitHub to get started. We're excited to see what you'll build with us.

Help Us Grow!

We're incredibly proud of what we've built, and we believe it can help a lot of developers. This is where you come in!

If you find Shadix UI useful, here are a few ways you can help us grow:

Share it: Tweet about it, share it with your team, or mention it in your favorite Discord community.
Give us a Star: Head over to our GitHub repository and give us a star. It helps with visibility.
Link to us: If you use Shadix UI in a project or write about it in a blog post or tutorial, please consider adding a backlink to our website. It's the single most effective way to help others discover the library.

We're just getting started and have many more components planned. We'd love to hear your feedback and ideas.

Happy coding!

Highly Customizable React Custom Select Box Component

GihanRangana — Sat, 15 Jun 2024 16:44:47 +0000

Enhance your user interfaces with a fully customizable React Select Box component. This versatile component replaces standard HTML select boxes with a user-friendly drop-down menu, giving you complete control over style, behavior, and functionality. Build intuitive and interactive forms that seamlessly integrate into your React applications, providing a superior user experience.

Let's get started!

First of all, we must create the HTML layout of our custom select box, Create Select.tsx file, and put this HTML into the react component return statement

<div className={styles.wrapper}>
<div className={styles.selectedContainer}>

                {!isOpen && <span className={styles.valueContainer}>{value.label}</span>}
                <input
                    title='"Select'
                    role='combobox'
                    ref={inputRef}
                    className={styles.inputContainer}
                    type='text'
                    value={query}
                    onChange={(e) => {
                        setQuery(e.target.value)
                    }}
                    placeholder={!value?.label ? placeholder : isOpen ? placeholder : ""}
                    readOnly={!isOpen}
                    onFocus={handleFocus}
                />
</div>

{isOpen && 

                    <div
                        className={[styles.optionsList, styles.top].join(' ')}
                    >
                            {filteredOptions.map((option) => (
                                <div
                                    key={option.value}
                                    className={styles.option}
                                    onClick={handleValueChange.bind(null, option)}
                                >
                                    {option.value === value.value &&
                                        <IoCheckmark />
                                    }

                                    {option.value !== value.value &&
                                        <div className={styles.emptyIcon} />
                                    }

                                    <span>{option.label}</span>
                                </div>
                            ))}
                    </div>
}

</div>

Create Selecta .module.scss file and put all these styles into the file

.wrapper {
    position: relative;
    border: 1px solid $ash-light;
    min-width: toRem(200);
    border-radius: map-get($map: $border-radius, $key: 'md');
    background-color: white;
    cursor: pointer;
}

.open {
    border-color: $primary;

    input {
        cursor: default !important;
    }
}

.selectedContainer {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;

    .inputContainer {
        position: relative;
        padding: map-get($map: $padding, $key: 'md');
        font-size: map-get($map: $font-size, $key: 'md');
        box-sizing: border-box;
        cursor: default;
        z-index: 1;
        background-color: transparent;
        border: none;
        outline: none;
        flex: 1;
        width: 100%;
        padding-right: 25px;
        cursor: pointer;
    }

    .valueContainer {
        width: 100%;
        position: absolute;
        font-size: map-get($map: $font-size, $key: 'md');
        right: 0;
        left: map-get($map: $padding, $key: 'md');
        z-index: 0;
        pointer-events: none;
    }

    .expandIcon {
        padding: map-get($map: $padding, $key: 'md');
        border-left: 1px solid $ash-light;
        display: flex;
        align-items: center;
        height: 100%;
        color: $ash-dark;
    }

    .clearIcon {
        padding: map-get($map: $padding, $key: 'md');
        position: absolute;
        right: 35px;
        height: 100%;
        display: flex;
        align-items: center;
        color: $ash-dark;
        z-index: 1;
    }
}

.optionsList {
    position: absolute;
    margin-top: map-get($map: $margin, $key: 'sm');
    border-radius: map-get($map: $border-radius, $key: 'sm');
    border: 1px solid $ash-light;
    width: 100%;
    padding: calc(map-get($map: $padding, $key: 'md')/3);
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
    // max-height: 200px;
    // overflow: auto;

    &.top {
        top: 100%;
    }

    .option {
        padding: toRem(8) map-get($map: $padding, $key: 'sm');
        padding-left: map-get($map: $padding, $key: 'md');
        display: flex;
        align-items: center;
        cursor: default;
        font-size: map-get($map: $font-size, $key: 'md');
        border-radius: map-get($map: $border-radius, $key: 'sm');

        &:hover {
            background-color: lighten($color: $ash-light, $amount: 7%);
        }

        .emptyIcon {
            width: 14px;
            height: 14px;
        }

        span {
            margin-left: map-get($map: $margin, $key: 'sm');
        }
    }
}

Let's begin to handle the functionality.

extracts the props on top of the component and creates selected value variable

const { defaultValue, options, placeholder, customStyles, clearable } = props;

    const selected: SelectOption = options.find(opt => opt.value === defaultValue) ?? { label: '', value: '' }

Create react states and refs

    const [value, setValue] = useState<SelectOption>(selected)
    const [filteredOptions, setFilteredOptions] = useState<SelectOption[]>(options ?? [])
    const [isOpen, setIsOpen] = useState<boolean>(false)
    const [query, setQuery] = useState<string>('')

    const inputRef = useRef<HTMLInputElement>(null)

here, I'm using the useDebounce hook to handle the search input value

const _query = useDebounce(query, 150)

Create useEffect to filter the options based on the input value


    useEffect(() => {
        if (!_query) {
            setFilteredOptions(options)
            return
        }

        const regex = new RegExp(_query.toLowerCase(), 'g')
        const filtered = options.filter(opt => opt.label.toLowerCase().match(regex) ?? opt.value.toLowerCase().match(regex))
        setFilteredOptions(filtered)

    }, [_query, options])

use these functions to handle the select box values


    const handleValueChange = (option: SelectOption) => {
        setValue(option)
        setQuery('')
        setIsOpen(false)
    }

    const handleFocus = () => {
        setIsOpen(true)
    }

To close the dropdown when clicking outside of the component, I'm using the useClickOutside hook as follows

    const handleClickOutside = () => {
        setIsOpen(false)
    }
    const wrapperRef = useClickOutside<HTMLDivElement | null>(handleClickOutside)

use this wrapperRef as a ref for the wrapper div element

<div ref={wrapperRef} className={styles.wrapper}>
.......
</div>

The demo code is as follows:

Follow the above stackblitz demo to get a better understanding of that component. It has used framer-motion to animate the drop-down and simplebar-react used as a scrollbar and also react-icons

How to Build Express JS Server with Typescript

GihanRangana — Mon, 23 Oct 2023 05:12:29 +0000

If you're looking for a quick and easy way to get started with Express JS, then this video is for you! We'll walk you through the steps necessary to build an Express JS server with Typescript, and by the end of the video, you'll have a working server ready to go!

Setup

Initialize NPM Project

npm init -y
npm install --dev typescript ts-node @types/node

Adding tsconfig.json

npx tsc --init

tsconfig.json

{
  "compilerOptions": {
    "module": "NodeNext",
    "moduleResolution": "NodeNext",
    "target": "ES2020",
    "sourceMap": true,
    "outDir": "dist"
  },
  "include": [
    "src/**/*"
  ]
}

Configure nodemon to restart the server automatically when adding changes to files.

npm install --dev nodemon

nodemon.json

{
    "watch": [
        "src/**/*"
    ],
    "exec": "npm run start:dev",
    "ext": "js,ts,json"
}

Scripts on package.json

"scripts": {
    "build": "tsc",
    "start:dev": "ts-node src/index.ts",
    "dev": "nodemon",
    "start":"npm run build && node ./dist/index.js"
}

Install and config Express Js

npm install express dotenv

type definitions for express

npm install --dev @types/express

src/index.ts

import express from 'express';
import dotenv from 'dotenv'

dotenv.config()

const app = express()

app.get('/', (req, res) => {
    res.send("Welcome to TS Server Updated!!!")
})

app.listen(process.env.PORT,() => {
    console.log(`TS Server listening on ${process.env.PORT}`)
})

.env

PORT=3000

Finally

npm run dev to run dev mode
npm start to production mode

Easy Animated Tabs in ReactJS with Framer Motion

GihanRangana — Tue, 03 Oct 2023 13:37:51 +0000

Learn how to create animated tabs in ReactJS using Framer Motion, all in just 10 minutes!

In this tutorial, we'll show you the quick and easy way to add lively animations to your ReactJS tabs. With Framer Motion, you can create engaging animated tabs effortlessly. By the end of this guide, you'll be all set to enhance your web development projects with dynamic React animations. Let's get started!

Source : https://github.com/TheCodersLife/animated-react-tabs

How to Optimize State Management with React Custom Hook: useStorage Explained

GihanRangana — Tue, 12 Sep 2023 06:25:32 +0000

In this video, we dive into a powerful React custom hook called "useStorage" that can revolutionize your state management. State management is a crucial aspect of any React application, and with the useStorage hook, we can optimize it to the next level.

With "useStorage," you'll learn how to efficiently save and retrieve data from the browser's local storage. This hook allows you to persist state across page refreshes, ensuring a seamless user experience.

We'll explore the implementation details of "useStorage" and its various use cases. Additionally, you'll discover how to handle edge cases and potential pitfalls when working with local storage in React.

By leveraging this custom hook, you can simplify your codebase, enhance performance, and improve overall user satisfaction. Say goodbye to cumbersome state management techniques and welcome the simplicity of "useStorage."

Join us in this informative and practical tutorial to unlock the true potential of React's state management capabilities. Don't miss out on the opportunity to optimize your state management with the incredible "useStorage" custom hook!

useStorage Hook

import { useState, useEffect, useCallback } from 'react';

const useStorage = (key: string, defaultValue: number | string | null = null, type?: "local" | "session") => {

    const storage = type === "local" ? window.localStorage : type === "session" ? window.sessionStorage : undefined;

    const [value, setValue] = useState<any>(() => {

        console.log(storage);

        const storageValue = storage?.getItem(key)

        if (storageValue != null) return JSON.parse(storageValue);

        return defaultValue;
    })

    useEffect(() => {

        if (value === undefined) return storage?.removeItem(key)

        storage?.setItem(key, JSON.stringify(value))

    }, [key, value, storage])

    const remove = useCallback(() => {
        setValue(undefined)
    }, [])

    return [value, setValue, remove]

}

export default useStorage;

Usage

import React, { useEffect } from 'react';
import useStorage from '../hooks/useStorage';

const UseStorageComponent: React.FC<UseStorageComponentProps> = (props) => {

    const [local, setLocal, removeLocal] = useStorage("firstName", "Coders", "local")
    const [session, setSession, removeSession] = useStorage("lastName", "Life", "session")

    useEffect(() => {
        console.log("local", local);
        console.log("session", session);

    }, [local, session])

    return (
        <>
            <div>
                <button
                    onClick={() => {
                        setLocal("updatedLocal")
                    }}
                >
                    Set Local Storage Value
                </button>

                <button
                    onClick={() => {
                        setSession("sessionUpdated")
                    }}
                >
                    Set Session Storage Value
                </button>
            </div>

            <div>

                <p>Local Storage Value: {local}</p>
                <p>Session Storage Value: {session}</p>

            </div>

            <div style={{ marginTop: 10 }}>
                <button
                    onClick={removeLocal}
                >
                    Remove Local Value
                </button>

                <button
                    onClick={removeSession}
                >
                    Remove Session Value
                </button>
            </div>
        </>
    )
}

interface UseStorageComponentProps {
    [key: string]: any
}

export default UseStorageComponent;

🧑‍💻 Source: https://github.com/TheCodersLife/reactjs-custom-hooks

React useInView Hook - How to create useInView Hook in ReactJs

GihanRangana — Thu, 17 Aug 2023 16:41:13 +0000

Learn how to create a powerful useInView hook in React using the Intersection Observer API. Elevate your development skills as we guide you through step-by-step instructions to create a custom useInView hook. Enhance user experience, optimize performance, and effortlessly track element visibility in your React projects.

Follow this video to step-by-step instructions

useInView.ts

import { useRef, useState, useEffect, RefObject } from 'react';

interface IOptions {
    root?: Element | null | undefined;
    rootMargin?: string,
    thresholds?: ReadonlyArray<number>
}

type useInViewType = {
    inView: boolean
    ref: RefObject<T> | null,
    observe: (element: RefObject<T>, callback: (entries: IntersectionObserverEntry[]) => void) => IntersectionObserver | null,
    unObserve: (observer: IntersectionObserver) => void
}

const useInView = (options: IOptions): useInViewType => {
    const [inView, setInView] = useState(false)

    const containerRef = useRef(null)

    const callback = (entries: IntersectionObserverEntry[]) => {
        const [entry] = entries
        setInView(entry.isIntersecting)
    }

    useEffect(() => {

        const _observer = new IntersectionObserver(callback, options)
        if (containerRef.current) _observer.observe(containerRef.current)

        return () => {
            if (containerRef.current) _observer.unobserve(containerRef.current)
        }

    }, [containerRef, options])

    // For Manual observers
    const observe = (element: RefObject<T>, callback: (entries: IntersectionObserverEntry[]) => void) => {
        const _observer = new IntersectionObserver(callback, options)
        containerRef.current = element.current

        return _observer
    }

    const unObserve = (observer: IntersectionObserver) => {
        if (containerRef.current) observer.unobserve(containerRef.current)
    }

    return {
        inView,
        ref: containerRef,
        observe,
        unObserve
    }

}

export default useInView;

Usage:


function App() {

    const [data, setData] = useState<any[]>([])
    const [page, setPage] = useState(1)

    const { ref, inView } = useInView({ thresholds: [2] })

    useEffect(() => {
        setData([...new Array(5 * page)])
    }, [page])

    useEffect(() => {
        if (inView) setPage(prev => prev + 1)
    }, [inView])

    return (
        <div className={styles.mainContainer}>
            {data.map((row: any, index: number) => {
                return <Card key={`card-${index.toString()}`} index={index} />
            })}

            <button ref={ref} className={styles.loadMore}>Load More</button>
        </div>
    )
}

Working Demo:

Reactjs useAccordion Hook - How To Create And Use Accordions In React Js

GihanRangana — Sat, 12 Aug 2023 10:09:12 +0000

Unlock streamlined content organization in ReactJS with our in-depth tutorial on creating and utilizing custom Accordion Hooks. Elevate user experience by mastering the process of crafting and integrating accordions seamlessly into your React applications. Perfect for developers seeking efficient UI/UX solutions.

Follow this tutorial to create your own useAccordion hook in react js

useAccordion.ts

import { useState, useEffect, useCallback, useMemo } from "react"

const useAccordion = (steps: StepsType[], activeName: string): UseAccordionType => {

    const [activeIndex, setActiveIndex] = useState<number>(0)
    const [currentStep, setCurrentStep] = useState<StepsType>(steps[0])

    useEffect(() => {
        if (!activeName) return;

        steps.map((step, index) => {
            if (step.name === activeName) {
                setActiveIndex(index)
                setCurrentStep(step)
            }
        })

    }, [])

    const goNext = () => setActiveIndex((next) => next < steps.length ? next + 1 : steps.length)
    const goPrev = () => setActiveIndex((prev) => prev > 0 ? prev - 1 : 0)

    const handleHeaderClick = (index: number) => {
        setActiveIndex(index)
        setCurrentStep(steps[index])
    }

    const isActive = useCallback((index: number) => {
        return index === activeIndex
    }, [activeIndex])

    return useMemo(() => ({
        steps,
        activeIndex,
        currentStep,
        goNext,
        goPrev,
        handleHeaderClick,
        isActive
    }), [activeIndex, currentStep])
}

export default useAccordion;

Accorion.tsx

const Accordion: React.FC<AccordionProps> = (props) => {

    const { steps } = props

    const renderContent = (step: StepsType, index: number) => {

        return (
            <React.Fragment key={`accordion-${index.toString()}-${step.name}`}>
                <div className={styles.accordionItem}>

                    <AccordionHeader {...props} step={step} index={index} />

                    <AccordionBody {...props} step={step} index={index} />

                </div>
            </React.Fragment>
        )
    }

    return (
        <div className={styles.accordion}>
            {steps && steps.map((step, index) => renderContent(step, index))}
        </div>
    )
}

AccordionBody.tsx

const AccordionBody: React.FC<AccordionBodyProps> = (props) => {

    const { activeIndex, step, index } = props;

    const getClassNames = () => {

        const classes: string[] = [styles.accordionBody]

        if (activeIndex === index) classes.push(styles.active)

        return classes.join(' ')
    }

    return (
        <div
            className={getClassNames()}
        >
            {step.render && step.render(step)}
        </div>
    )
}

AccordionHeader.tsx

const AccordionHeader: React.FC<AccordionHeaderProps> = (props) => {

    const { activeIndex, step, handleHeaderClick, index, isActive } = props

    const getClassNames = () => {

        const classes: string[] = [styles.accordionHeader]

        if (activeIndex === index) classes.push(styles.active)

        return classes.join(' ')
    }

    return useMemo(() => (
        <div
            className={getClassNames()}
            onClick={handleHeaderClick.bind(null, index)}
        >
            <span>{step.title}</span>

            <IoChevronForwardSharp
                className={[
                    styles.chevron,
                    isActive(index)
                        ? styles.chevronActive
                        : styles.chevronInactive
                ].join(' ')}
            />

        </div>
    ), [activeIndex])
}

App.tsx

function App() {

    const steps: StepsType[] = [
        {
            name: "accordion1",
            title: "Accordion 1 Title",
            render: (props: any) => (
                <p>
                    {/*content*/}
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae sit quod vero corrupti ducimus iste suscipit, culpa maiores minima sunt nobis adipisci expedita aliquid voluptatibus ab facere. Earum, distinctio quidem.
                </p>
            )
        },
        {
            name: "accordion2",
            title: "Accordion 2 Title",
            render: (props: any) => (
                <p>
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis, soluta quia odio dicta aspernatur vel, nesciunt repudiandae perspiciatis adipisci ipsum quae laborum minima praesentium iste modi doloremque officia saepe vitae!
                </p>
            )
        }
    ]

    const accordion = useAccordion(steps, 'accordion1')

    return (
        <div className="App">
            <Accordion {...accordion} />
        </div>
    )
}

Follow the above video to get an idea about this source code.

Source: https://github.com/TheCodersLife/react-hook-useAccordion

How to implement dark mode in react js with custom hook.

GihanRangana — Thu, 10 Aug 2023 04:25:09 +0000

Discover how to effortlessly add dark mode functionality to your React JS app using the useDarkMode hook and SCSS in our step-by-step guide for 2023. Elevate your user experience by following along with our comprehensive tutorial, designed for developers of all levels. With clear instructions and practical examples, you'll learn how to integrate the useDarkMode hook and utilize SCSS to create a visually appealing and dynamic dark mode feature. Enhance your coding skills and take your React applications to the next level by implementing this sought-after user interface enhancement.

yarn add -D sass

useDarkMode Hook

import { useEffect, useState } from 'react';

const useDarkMode = () => {
    const [enabled, setEnabled] = useState(false);

    const body = document.body;

    useEffect(() => {

        body.setAttribute('theme', `${enabled ? 'dark' : 'light'}`);

    }, [enabled]);

    useEffect(() => {
        const isDarkMode = window.matchMedia(
            '(prefers-color-scheme: dark)'
        ).matches;
        const isLightMode = window.matchMedia(
            '(prefers-color-scheme: light)'
        ).matches;

        if (isDarkMode) setEnabled(true);
        if (isLightMode) setEnabled(false);
    }, []);

    return { enabled, setEnabled };
};

export default useDarkMode;

Source Code: https://github.com/TheCodersLife/react-useDarkMode-hook

How to Use a Sass/SCSS with Expo SDK v48 and TypeScript

GihanRangana — Wed, 08 Mar 2023 14:12:54 +0000

If you're a mobile app developer using Expo, you're probably already familiar with how easy it is to build a high-quality app with minimal setup. However, if you're used to using Sass/SCSS in your web development workflow, you might be wondering how to incorporate it into your Expo project. In this tutorial, we'll walk you through how to set up Sass/SCSS in your Expo SDK v48 project, using TypeScript.

Step 1: Create Project with expo v48

The first step you should have to create a expo project with the latest expo v48.

npx create-expo-app my-app --template typescript
cd my-app

Step 2: Install Dependencies

Install the dependencies needed for Sass/SCSS to work with Expo SDK v48 and TypeScript. Run the following command in your terminal:

npm install babel-plugin-react-native-classname-to-style babel-plugin-react-native-platform-specific-extensions node-sass react-native-sass-transformer

If you want create .d.ts file for your .scss files add react-native-typed-sass-transformer instead of react-native-sass-transformer

Step 3: Update package.json

In this step we have to update package.json to use react-native from github repo. This is required to use className prop on react native elements. update react-native with follows:

"dependencies": {
    "react-native": "gihanrangana/react-native#v0.71.3"
}

Step 4: Configure the babel.config.js

Now we need to update babel.config.js file as follows

//babel.config.js
module.exports = function (api) {
    api.cache(true);
    return {
        presets: ['babel-preset-expo'],
        plugins: [
            "react-native-classname-to-style",
            [
                "react-native-platform-specific-extensions",
                { extensions: ["scss", "sass"] },
            ],
        ],
    };
};

Step 5: Configure metro.config.js

In this step we configure the metro.config.js to transform styles from .scss or .sass files.

First create the transformer.js file at project root as follows:

//transformer.js
cosnt upstreamTransformer = require("metro-react-native-babel-transformer");
const sassTransformer = require("react-native-sass-transformer");

const theme = (process.cwd() + "/src/styles/Global.scss").replace(/\\/g, "/");

module.exports.transform = function ({ src, filename, options }) {
    if (filename.endsWith(".scss") || filename.endsWith(".sass")) {
        var opts = Object.assign(options, {
            sassOptions: {
                functions: {
                    "rem($px)": px => {
                        px.setValue(px.getValue() / 16);
                        px.setUnit("rem");
                        return px;
                    }
                }
            }
        });

        src = `@import "${theme}"; \n\n ` + src;

        return sassTransformer.transform({ src, filename, options: opts });
    } else {
        return upstreamTransformer.transform({ src, filename, options });
    }
};

This file will transform all scss files you import in your project. There is one plus point,

You can create Global.scss files under the src/styles/ directory. on that file you can create your own sass variables, then you can use any sass variables you declared on Global.scss any ware in your project globally without importing.

Now you have to run this command to create metro.config.js file:

npx expo customize metro.config.js

This command will create file called metro.config.js, after that update file as follows:

// metro.config.js
const { getDefaultConfig } = require('expo/metro-config');

const config = getDefaultConfig(__dirname);

const { resolver: { sourceExts } } = config;

config.transformer.babelTransformerPath = require.resolve("./transformer.js");
config.resolver.sourceExts = [...sourceExts, "scss", "sass"];

module.exports = config;

Ok great! you are done now with configurations. let's test it now!

Create file called index.js on root of the project with this content

//index.js
import { registerRootComponent } from "expo";
import App from "./src/App";

registerRootComponent(App)

Update package.json as follows:

"main": "index.js",

Create directory called src and move App.tsx to it.

Create App.scss inside the src directory

/*App.scss*/
.container {
    flex: 1;
    justify-content: center;
    align-items: center;
    background-color: $bg;
    padding: 10px;
}

.text {
    color: $light0;
    font-size: rem(24px);
    text-align: center;
}

Update App.tsx as follows:

// App.tsx
import { StatusBar } from 'expo-status-bar';
import { Text, View } from 'react-native';

import styles from './App.scss';

export default function App() {
  return (
    <View className={styles.container}>
      <Text className={styles.text}>This is app using scss to create styling the components</Text>
      <StatusBar style="auto" />
    </View>
  );
}

Now run the app with npm start, you will get output like this

See this repo to get better understand about this configuration:
expo-sdk-48-sass-transformer-ts

Conclusion

Using Sass/SCSS with Expo SDK v48 and TypeScript can enhance your mobile app development workflow by allowing you to write more modular and maintainable stylesheets. With just a few simple steps, you can setup babel and metro to handle Sass/SCSS files and include them in your TypeScript project. From there, you can write Sass/SCSS code and import it into your TypeScript files.Overall, incorporating Sass/SCSS into your Expo project can make your styling more efficient, organized, scalable and also you can use same stylesheet from mobile app to web app or web app to mobile app easily.

Routes not working when react app is build

GihanRangana — Fri, 17 Aug 2018 09:54:58 +0000

I created react app react router 4.but I build my project using npm run build route URL not working and display 404 page.how can I fix that? I have no idea.this is my code

import React from "react";
import ReactDOM from "react-dom";
import registerServiceWorker from "./registerServiceWorker";
import { BrowserRouter as Router,Switch,Route } from "react-router-dom";

import { createMuiTheme, MuiThemeProvider } from "@material-ui/core/styles";

import "react-datepicker/dist/react-datepicker-cssmodules.css";
import "./styles/main.scss";


import App from "../App";
import AdminHome from "../pages/admin/home";
import Login from "../pages/login";
import PrivateRoute from "./privateRoute";

const theme = createMuiTheme({
    palette: {
        type: "dark"
    }
});


ReactDOM.render((
    
        
            
                
                
                
                 
Not Found}/>
            
        
    
), document.getElementById("root"));

registerServiceWorker();

Can anyone help me to fix this?

DEV Community: GihanRangana

Building a Dynamic Segmented Layout in React with Framer Motion

What is the SegmentLayout Component?

How to Use It

Core Features

Key Props

How It Works: A Look Under the Hood

Conclusion

Capture Digital Signatures Easily with Shadix UI SignaturePad

🚀 Installation

💡 Basic Usage

⚙️ Props Overview

🧩 Real-World Use

🧠 Pro Tip

🎯 Final Thoughts

Supercharge Your React App: Introducing Shadix UI - The Missing Components for Shadcn/UI

What is Shadix UI?

A Glimpse of What You Can Build

Why Not Just Build Them Myself?

Getting Started

How to Contribute

Help Us Grow!

Highly Customizable React Custom Select Box Component

How to Build Express JS Server with Typescript

Setup

Initialize NPM Project

Adding tsconfig.json

Configure nodemon to restart the server automatically when adding changes to files.

Scripts on package.json

Install and config Express Js

Finally

Easy Animated Tabs in ReactJS with Framer Motion

How to Optimize State Management with React Custom Hook: useStorage Explained

useStorage Hook

Usage

React useInView Hook - How to create useInView Hook in ReactJs

Reactjs useAccordion Hook - How To Create And Use Accordions In React Js

useAccordion.ts

Accorion.tsx

AccordionBody.tsx

AccordionHeader.tsx

App.tsx

How to implement dark mode in react js with custom hook.

useDarkMode Hook

How to Use a Sass/SCSS with Expo SDK v48 and TypeScript

Step 1: Create Project with expo v48

Step 2: Install Dependencies

Step 3: Update package.json

Step 4: Configure the babel.config.js

Step 5: Configure metro.config.js

Conclusion

Routes not working when react app is build

What is the `SegmentLayout` Component?