Forem: Ayesha Munir

Creating a Custom Select Component with Tree View in React

Ayesha Munir — Sun, 17 Mar 2024 16:32:35 +0000

In this blog post, we'll walk through the process of creating a custom select component in React that includes a tree view for displaying options and sub-options. 🚀

Custom Select Component 🎛️
The custom select component is a dropdown menu that allows users to select an option from a list. Here's the basic structure of our custom select component:

import PropTypes from 'prop-types'
import TreeView from './treeView'
import React, { useState, useEffect, useRef } from 'react'
import { iconExtraSmall } from '@/lib/utils/helperUtils/constants'
import { IconChevronDown, IconChevronUp } from '@tabler/icons-react'

const CustomSelect = ({ options, selectedOption, setSelectedOption }) => {
    const dropdownRef = useRef(null)
    const [expanded, setExpanded] = useState({})
    const [isOpen, setIsOpen] = useState(false)
    const [selectedOptionObject, setSelectedOptionObject] = useState(null)

    useEffect(() => {
        const handleClickOutside = (event) => {
            if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
                setIsOpen(false)
            }
        }

        document.addEventListener('mousedown', handleClickOutside)
        return () => {
            document.removeEventListener('mousedown', handleClickOutside)
        }
    }, [])

    const handleExpand = (id) => {
        setExpanded((prev) => ({ ...prev, [id]: !prev[id] }))
    }

    const handleSelect = (option) => {
        setSelectedOption(option.id)
        setSelectedOptionObject(option)
    }

    return (
        <div className="relative" ref={dropdownRef}>
            <div className="w-full text-xs font-normal h-[40px] text-fieldsText rounded-md outline-none border-input bg-fieldsBg  z-50 max-h-96 min-w-[8rem] overflow-hidden">
                <button
                    className="flex h-10 w-full items-center whitespace-nowrap rounded-md bg-transparent px-3 py-2 text-xs shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1"
                    onClick={() => setIsOpen(!isOpen)}
                    disabled={!options?.length}
                    type="button"
                >
                    {selectedOption && selectedOptionObject?.name}
                    <div className="ml-auto">
                        {isOpen ? (
                            <IconChevronUp size={iconExtraSmall} className={'cursor-pointer'} />
                        ) : (
                            <IconChevronDown size={iconExtraSmall} className={'cursor-pointer'} />
                        )}
                    </div>
                </button>
            </div>
            {isOpen && (
                <div className="absolute top-full w-full mt-1 bg-white border border-gray-200 rounded-md shadow-lg z-50 p-1 overflow-auto max-h-36">
                    {options?.map((option) => (
                        <TreeView
                            key={option.id}
                            option={option}
                            handleExpand={handleExpand}
                            handleSelect={handleSelect}
                            expanded={expanded}
                            selectedOption={selectedOption}
                        />
                    ))}
                </div>
            )}
        </div>
    )
}

CustomSelect.propTypes = {
    options: PropTypes.array,
    selectedOption: PropTypes.string,
    setSelectedOption: PropTypes.func,
}

export default CustomSelect

Here you can see Select field with Chevron down icon on right. By clicking on field it will expand the dropdown and you will be able to see main options in one go.

Tree View Component
The tree view component is a visual representation of hierarchical data. It displays data as a tree-like structure with collapsible nodes. This is particularly useful when dealing with nested data, like a directory of folders and files or a nested menu structure.

import PropTypes from 'prop-types'

const TreeView = ({ option, handleExpand, handleSelect, expanded, selectedOption, level = 0 }) => {
    const getIcon = (option) => {
        if (option.subFolders.length > 0) {
            return (
                <div>
                    <button onClick={() => handleExpand(option.id)} className="flex cursor-default items-center justify-center">
                        <div className="flex items-center justify-center w-3 h-3 border border-fieldsText text-fieldsText text-xs">
                            {expanded[option.id] ? '-' : '+'}
                        </div>
                    </button>
                </div>
            )
        } else {
            return (
                <div className="flex items-center justify-center w-3 h-3 border border-fieldsText text-fieldsText text-[0.6rem] ">
                    x
                </div>
            )
        }
    }

    return (
        <div key={option.id} className="w-full">
            <button
                type="button"
                onClick={() => handleSelect(option)}
                style={{ marginLeft: `${level * 1.25}rem`, width: `calc(100% - ${level * 1.25}rem)` }}
                className={`relative flex py-2 px-1.5  cursor-default text-fieldsText select-none items-center rounded-sm  text-xs outline-none font-normal ${option === selectedOption ? 'bg-accent text-accent-foreground' : ''} hover:bg-accent focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 whitespace-nowrap`}
            >
                <div className="flex items-center">
                    <div className="pr-1.5">{getIcon(option)}</div>
                    {option.name}
                </div>
            </button>
            {expanded[option.id] &&
                option.subFolders.map((subOption) => (
                    <TreeView
                        key={subOption.id}
                        option={subOption}
                        handleExpand={handleExpand}
                        handleSelect={handleSelect}
                        expanded={expanded}
                        selectedOption={selectedOption}
                        level={level + 1}
                    />
                ))}
        </div>
    )
}

TreeView.propTypes = {
    option: PropTypes.object,
    handleExpand: PropTypes.func,
    handleSelect: PropTypes.func,
    expanded: PropTypes.object,
    selectedOption: PropTypes.string,
    level: PropTypes.number,
}

export default TreeView

In the tree view component, It allows users to interact with hierarchical data. It uses '+' and '-' icons to represent expandable and collapsible options respectively. Options without sub-options are represented by an 'x' icon.

This is Complete view of Select custom component and Tree view for showing and selecting from main options or sub options.

In summary, the tree view component in React effectively displays hierarchical data, offering a user-friendly interface for navigation and selection, and enhancing interactivity with its expand/collapse features. 🎉

If you have any thoughts or queries, don't hesitate to share them in the comments section. Your input is greatly appreciated! 😊

If you found this post helpful, please consider giving it a thumbs up or a share to help others discover it.

Keep coding and stay curious! 🎈

🌐 Get in touch: Ayesha Munir
👥 Connect: Linkedin | Facebook| Instagram

React - Building Chip and Chip Input Component from Scratch

Ayesha Munir — Sat, 02 Mar 2024 19:06:35 +0000

In this blog post, we will walk through creating a Chip and Chip Input component in React. These components are commonly used in modern web applications for tagging, filtering, and input selection.

Chip Component
The Chip component is a small, interactive element that represents an input, attribute, or action. It is a versatile component that can be used in a variety of ways.

Here is the code for our Chip component:

import React from 'react'
import PropTypes from 'prop-types'
import { Label } from './ui/label'
import { IconX } from '@tabler/icons-react'
import { getProfileIcon } from '@/lib/helpers/common'

const imageProps = {
    width: 20,
    height: 20,
}

const avatarStyles = 'w-[20px] h-[20px]'

const Chip = ({ label, color, containerClass, labelClass, isDelete, isImage, onDelete, chipStyles, chipImage }) => {
    return (
        <div
            className={`px-2 ${color} rounded justify-center items-center gap-1 inline-flex ${chipStyles} ${containerClass}`}
        >
            <div className="justify-center items-center gap-1 flex">
                {isImage && getProfileIcon(chipImage, imageProps, label, avatarStyles, 'text-sm')}
                <Label className={`text-zinc-600 text-xs font-medium ${labelClass}`}>{label}</Label>
            </div>

            {isDelete && (
                <button onClick={onDelete}>
                    <IconX size={16} stroke={2} color={'red'} />
                </button>
            )}
        </div>
    )
}

Chip.propTypes = {
    label: PropTypes.string.isRequired,
    isDelete: PropTypes.bool,
    onDelete: PropTypes.func,
    color: PropTypes.string,
    chipStyles: PropTypes.string,
    isImage: PropTypes.bool,
    chipImage: PropTypes.string,
    containerClass: PropTypes.string,
    labelClass: PropTypes.string,
}

export default Chip

On the Right side you can see chips with different titles and you can also make it profile tags and show user images and avatars into it!

Chip Input Component
The Chip Input component is a text input that can contain multiple "chips" as input. It is useful for tagging, multi-select, or input suggestions.

Here is the code for our Chip Input component:

import React, { useState, useRef } from 'react'
import Chip from './chip'
import PropTypes from 'prop-types'

function ChipsInput({ chips, setChips, chipColor }) {
    const [inputValue, setInputValue] = useState('')
    const [suggestions, setSuggestions] = useState(['Person', 'User'])
    const [removedSuggestions, setRemovedSuggestions] = useState([])
    const inputRef = useRef()

    const handleInputChange = (event) => {
        setInputValue(event.target.value)
    }

    const handleDeleteChip = (chipToDelete) => {
        setChips(chips.filter((chip) => chip !== chipToDelete))
        if (removedSuggestions.includes(chipToDelete)) {
            setSuggestions((prevSuggestions) => [...prevSuggestions, chipToDelete])
            setRemovedSuggestions((prevRemoved) => prevRemoved.filter((item) => item !== chipToDelete))
        }
        inputRef.current.focus()
    }

    const handleInputKeyDown = (event) => {
        if (event.key === 'Enter') {
            event.preventDefault()
            const newChip = inputValue.trim()
            if (newChip !== '') {
                setChips([...chips, newChip])
                setInputValue('')
            }
        } else if (event.key === 'Backspace' && inputValue === '') {
            const lastChip = chips[chips.length - 1]
            handleDeleteChip(lastChip)
        }
    }

    const handleSuggestionClick = (suggestion) => {
        setChips([...chips, suggestion])
        setSuggestions((prevSuggestions) => prevSuggestions.filter((prevSuggestion) => prevSuggestion !== suggestion))
        setRemovedSuggestions((prevRemoved) => [...prevRemoved, suggestion])
        setInputValue('')
    }

    return (
        <div className="relative">
            <div className="flex flex-wrap gap-2 min-h-10 items-center bg-fieldsBg p-2 rounded">
                {chips.map((chip) => (
                    <Chip
                        key={chip}
                        containerClass="h-[26px]"
                        label={chip}
                        isDelete={true}
                        color={chipColor}
                        onDelete={() => handleDeleteChip(chip)}
                    />
                ))}
                <input
                    ref={inputRef}
                    type="text"
                    value={inputValue}
                    onChange={handleInputChange}
                    onKeyDown={handleInputKeyDown}
                    className="flex-grow bg-fieldsBg text-sm outline-none"
                />
            </div>
            {!!suggestions.length && inputValue && (
                <div className="absolute left-0 mt-1 w-full bg-white rounded shadow z-10">
                    {!!suggestions.filter((suggestion) => suggestion.toLowerCase().includes(inputValue.toLowerCase())).length &&
                        inputValue && (
                            <div className="absolute left-0 mt-1 w-full bg-white border rounded shadow z-10">
                                {suggestions
                                    .filter((suggestion) => suggestion.toLowerCase().includes(inputValue.toLowerCase()))
                                    .map((suggestion) => (
                                        <button
                                            key={suggestion}
                                            onClick={() => handleSuggestionClick(suggestion)}
                                            className="p-2 hover:bg-gray-200 cursor-pointer w-full text-left"
                                        >
                                            {suggestion}
                                        </button>
                                    ))}
                            </div>
                        )}
                </div>
            )}
        </div>
    )
}

ChipsInput.propTypes = {
    chips: PropTypes.arrayOf(PropTypes.string).isRequired,
    setChips: PropTypes.func.isRequired,
    chipColor: PropTypes.string.isRequired,
}

export default ChipsInput

Here you can see two chip inputs with different background chip color and cross icon to remove it and can also remove it through backspace🙌

That's it for now, folks! 🎉 I hope you found this post useful and it helps you in your coding journey. Remember, practice is key when it comes to mastering programming. Keep coding and stay curious! 💻🚀

If you have any questions or feedback, feel free to leave a comment below. I'd love to hear from you! 😊

Thank you for reading! If you enjoyed this post, please consider giving it a 🧡 or 🦄 to help more people find it.

Happy coding! 🎈

🌐 Get in touch: Ayesha Munir
👥 Connect: Linkedin | Facebook | Instagram