https://github.com/skn437/skn-react-types
A Simple Type Definition Extension Library For React.js 18
https://github.com/skn437/skn-react-types
bun library nextjs nodejs react types typescript
Last synced: 4 months ago
JSON representation
A Simple Type Definition Extension Library For React.js 18
- Host: GitHub
- URL: https://github.com/skn437/skn-react-types
- Owner: skn437
- License: mit
- Created: 2024-06-09T12:22:39.000Z (about 2 years ago)
- Default Branch: master
- Last Pushed: 2025-10-23T06:17:43.000Z (8 months ago)
- Last Synced: 2025-10-23T08:25:50.109Z (8 months ago)
- Topics: bun, library, nextjs, nodejs, react, types, typescript
- Language: Shell
- Homepage:
- Size: 43 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# SKN React Type Extension Library
> TypeScript React
[](https://www.npmjs.com/package/@best-skn/react-types) [](https://opensource.org/license/mit)
## **_Introduction:_**
### This is a simple TypeScript Type Extension Library for React 18 & also for Next.js 14
### I made this library so that I can use it in all of my Next.js 14 projects without writing the same codes over and over again
## **_Details:_**
### **`SC/SFC` Type**
- type `SC/SFC` both are for server components except for layout ones (layout.tsx in Next.js 14)
- type `SC/SFC` both take generic type of any kinds of props
- `SC` is used in asynchronous server components that returns a `Promise` of `React.JSX.Element | React.ReactNode`
- `SFC` is used in synchronous server components that returns `React.JSX.Element | React.ReactNode`
- For usage instruction, see `Usage` section
### **`ChildrenProps` Type**
- An interface that has `children` property of type `React.JSX.Element | React.ReactNode`
- For usage instruction, see `Usage` section
### **`SLC/SFLC` Type**
- type `SLC/LSFC` both are for layout server components (layout.tsx in Next.js 14)
- type `SLC/SFLC` don't take any generics
- `SLC` is used in asynchronous layout server components that returns a `Promise`
of `React.JSX.Element | React.ReactNode`
- `SFLC` is used in synchronous layout server components that returns `React.JSX.Element | React.ReactNode`
- For usage instruction, see `Usage` section
## **_Use Case:_**
- React
- Next.js
## **_Requirements:_**
### This library has peer dependency for React & React DOM of minimum 18.3.1. It may or may not work on 19.x
### This library is intended to be used in Next.js of minimum 14.2.3. It may or may not work on 15.x
- 💀 Minimum [react](https://www.npmjs.com/package/react) Version: `18.3.1`
- 💀 Minimum [@types/react](https://www.npmjs.com/package/@types/react) Version: `18.3.3`
- 💀 Minimum [react-dom](https://www.npmjs.com/package/react-dom) Version: `18.3.1`
- 💀 Minimum [@types/react-dom](https://www.npmjs.com/package/@types/react-dom) Version: `18.3.0`
- 💀 Minimum [next](https://www.npmjs.com/package/next) Version: `14.2.3`
## **_Complementary Libraries:_**
- [@best-skn/next-types](https://www.npmjs.com/package/@best-skn/next-types)
## **_Usage:_**
### To install the package, type the following in console
> ```zsh
> npm add -D @best-skn/react-types
> #or
> yarn add -D @best-skn/react-types
> #or
> pnpm add -D @best-skn/react-types
> #or
> bun add -D @best-skn/react-types
> ```
### Create a directory called `types` in the root location of your project, and create a file called `react.d.ts`, then do this
> ```typescript
> import "@best-skn/react-types";
> ```
### Check your `tsconfig.json` if `includes` property has `**/*.ts` or not otherwise the type definition file may not work
### Now Inside your Next.js 14 Project, use the package like this (Just an example)
#### **_`SC/SFC` Type:_**
#### For any `Server Components` except the `Layout Server Components`, do the following
> ##### **(a) Asynchronous:**
>
> ```typescript jsx
> // Location: app/page.tsx
> const Home: React.SC = async () => {
> return (
>
something...
> );
> };
>
> export default Home;
> ```
>
> ##### **(b) Synchronous:**
>
> ```typescript jsx
> // Location: app/page.tsx
> const Home: React.SFC = () => {
> return (
> something...
> );
> };
>
> export default Home;
> ```
#### **_`ChildrenProps` Type:_**
#### For any kinds of `Functional Component (Server or Client)`, you can use like this if it needs `children` props
> ##### **(a) Server:**
>
> ```typescript jsx
> import type { ChildrenProps } from "react";
>
> const HomeComponent: React.SFC = (props) => {
> const { children } = props;
>
> return (
>
something...
> );
> };
>
> export default HomeComponent;
> ```
>
> ##### **(b) Client:**
>
> ```typescript jsx
> "use client"
>
> import type { ChildrenProps } from "react";
>
> const HomeComponent: React.FC = (props) => {
> const { children } = props;
>
> return (
> something...
> );
> };
>
> export default HomeComponent;
> ```
#### **_`SLC/SFLC` Type:_**
#### For any `Layout Server Components`, do the following
> ##### **(a) Asynchronous case:**
>
> ```typescript jsx
> // Location: app/layout.tsx
> const RootLayout: React.SLC = async (props) => {
> const { children } = props;
>
> return (
>
> {children}
>
> );
> };
>
> export default RootLayout;
> ```
>
> ##### **(a) Synchronous case:**
>
> ```typescript jsx
> // Location: app/layout.tsx
> const RootLayout: React.SFLC = (props) => {
> const { children } = props;
>
> return (
>
> {children}
>
> );
> };
>
> export default RootLayout;
> ```
## **_Dedicated To:_**
- 👩🎨`Prodipta Das Logno` & 🧛♀️`Atoshi Sarker Prithula`: The two most special ladies of my life. My best wishes will always be with you two. May you two always be happy.
- 💯`My Parents`: The greatest treasures of my life ever.
## **_License:_**
Copyright (C) 2024 SKN Shukhan
Licensed under the MIT License