FEToolkit/React

(This thumbnail was created by Chat GPT)

English | 한국어

FEToolkit is a toolkit library that provides useful functions for Frontend development. The library is divided according to frameworks such as React and Vue, and functions that can be used in common regardless of the framework will be distributed as separate libraries. This package is only available for React.

Notice

• We have conducted a major update through V2 version update.
  • ContextMenu functionality has been moved to @fetoolkit/context-menu-react. (Related features provided by this package have been deprecated.)
  • All utility functions provided by this package have been deprecated.
    • userAgent functionality has been moved to @fetoolkit/user-agent.
    • Other functions are provided in @fetoolkit/utils.

1. Compatibility

| Framework | enabled | version | | :----------: | :-----: | :-----: | | React | ⭕ | >=19 | | Next.js | ❌ | | | React Native | ❌ | |

2. Getting Started

2-1. Installation

• npm

  npm i @fetoolkit/react

• yarn

  yarn add @fetoolkit/react

• pnpm

  pnpm add @fetoolkit/react

2-1-1. Additional Required Packages

• npm

  npm i @fetoolkit/user-agent

• yarn

  yarn add @fetoolkit/user-agent

• pnpm

  pnpm add @fetoolkit/user-agent

2-2. Connect Provider

You need to connect FEToolkitProvider Component on root to Stable functional behavior

import React, { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import App from './App.tsx';
import { FEToolkitProvider } from '@fetoolkit/react';
import './index.css';

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <FEToolkitProvider>
      <App />
    </FEToolkitProvider>
  </StrictMode>,
);

3. Features

3-1. Integrated Features

| Name | Description | Docs | | :--------- | :------------------------ | :--------------------------------------: | | Validation | Validation check Features | Document |

3-2. Components

| Name | Description | Docs | | :------------- | :------------------------------------------------------------------------------------------------------ | :-----------------------------------------------: | | ErrorBoundary | A Component which is useful to controll an error declaratively(with HOC) | Document | | Flatlist | A Component which is useful to render flat list.(p.s. if you're RN developer, you will understand.) | Document | | InfiniteScroll | A Component to create an infinite scrolling. | Document |

3-3. Hooks

| Name | Description | Docs | | :-------------------- | :----------------------------------------------------------------- | :-------------------------------------------------: | | useAsyncLoading | A Hook to manage the loading status of async process. | Document | | useCountdown | A Hook to implement countdown feature. | Document | | useImageLazyLoading | A Hook for implementing Image Lazy loading. | Document | | useInput | A Hook to manage input value. | Document | | useLocalStorage | A Hook to usage of LocalStorage. | Document | | useResizeElement | A Hook for tracking the size of particular HTML element | Document | | useResizeWindow | A Hook for tracking the viewport size. | Document | | useScroll | A Hook for tracking the location of scrolling | Document | | useSessionStorage | A Hook to usage of SessionStorage. | Document | | useToggle | A Hook to controll input value(toggle). | Document | | useUserAgent | A Hook that returns UserAgent data from browser. (cached data) | Document | | useValidationCheck | A Hook for validation check | Document | | useValidateCheckInput | A Hook that manage input value with validation check. | Document |