{"id":21646598,"url":"https://github.com/skn437/skn-react-types","last_synced_at":"2026-02-09T03:31:46.442Z","repository":{"id":243543013,"uuid":"812623077","full_name":"skn437/skn-react-types","owner":"skn437","description":"A Simple Type Definition Extension Library For React.js 18","archived":false,"fork":false,"pushed_at":"2025-10-23T06:17:43.000Z","size":44,"stargazers_count":1,"open_issues_count":2,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-10-23T08:25:50.109Z","etag":null,"topics":["bun","library","nextjs","nodejs","react","types","typescript"],"latest_commit_sha":null,"homepage":"","language":"Shell","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/skn437.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-06-09T12:22:39.000Z","updated_at":"2025-10-23T06:16:16.000Z","dependencies_parsed_at":"2024-06-09T18:43:08.928Z","dependency_job_id":"bf0d246b-58b2-40d6-b7d1-2108215c1444","html_url":"https://github.com/skn437/skn-react-types","commit_stats":null,"previous_names":["skn437/skn-react-types"],"tags_count":7,"template":false,"template_full_name":null,"purl":"pkg:github/skn437/skn-react-types","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/skn437%2Fskn-react-types","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/skn437%2Fskn-react-types/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/skn437%2Fskn-react-types/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/skn437%2Fskn-react-types/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/skn437","download_url":"https://codeload.github.com/skn437/skn-react-types/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/skn437%2Fskn-react-types/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29255602,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-09T03:07:45.136Z","status":"ssl_error","status_checked_at":"2026-02-09T03:07:24.123Z","response_time":56,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bun","library","nextjs","nodejs","react","types","typescript"],"created_at":"2024-11-25T06:45:48.694Z","updated_at":"2026-02-09T03:31:46.437Z","avatar_url":"https://github.com/skn437.png","language":"Shell","funding_links":[],"categories":[],"sub_categories":[],"readme":"# SKN React Type Extension Library\n\n\u003cimg width=\"150px\" src=\"https://firebasestorage.googleapis.com/v0/b/skn-ultimate-project-la437.appspot.com/o/GitHub%20Library%2F08-TypeScript-SRT.svg?alt=media\u0026token=5ada477b-a37e-4cdd-be35-19e1e89de649\" alt=\"react\" /\u003e\n\n\u003e TypeScript React\n\n[![NPM Version](https://img.shields.io/npm/v/%40best-skn%2Freact-types)](https://www.npmjs.com/package/@best-skn/react-types) [![MIT License](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/license/mit)\n\n\u0026nbsp;\n\n## **_Introduction:_**\n\n### This is a simple TypeScript Type Extension Library for React 18 \u0026 also for Next.js 14\n\n### 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\n\n\u0026nbsp;\n\n## **_Details:_**\n\n### **`SC/SFC` Type**\n\n- type `SC/SFC` both are for server components except for layout ones (layout.tsx in Next.js 14)\n- type `SC/SFC` both take generic type of any kinds of props\n- `SC` is used in asynchronous server components that returns a `Promise` of `React.JSX.Element | React.ReactNode`\n- `SFC` is used in synchronous server components that returns `React.JSX.Element | React.ReactNode`\n- For usage instruction, see `Usage` section\n\n### **`ChildrenProps` Type**\n\n- An interface that has `children` property of type `React.JSX.Element | React.ReactNode`\n- For usage instruction, see `Usage` section\n\n### **`SLC/SFLC` Type**\n\n- type `SLC/LSFC` both are for layout server components (layout.tsx in Next.js 14)\n- type `SLC/SFLC` don't take any generics\n- `SLC` is used in asynchronous layout server components that returns a `Promise`\n  of `React.JSX.Element | React.ReactNode`\n- `SFLC` is used in synchronous layout server components that returns `React.JSX.Element | React.ReactNode`\n- For usage instruction, see `Usage` section\n\n\u0026nbsp;\n\n## **_Use Case:_**\n\n- React\n- Next.js\n\n\u0026nbsp;\n\n## **_Requirements:_**\n\n### This library has peer dependency for React \u0026 React DOM of minimum 18.3.1. It may or may not work on 19.x\n\n### This library is intended to be used in Next.js of minimum 14.2.3. It may or may not work on 15.x\n\n- 💀 Minimum [react](https://www.npmjs.com/package/react) Version: `18.3.1`\n- 💀 Minimum [@types/react](https://www.npmjs.com/package/@types/react) Version: `18.3.3`\n- 💀 Minimum [react-dom](https://www.npmjs.com/package/react-dom) Version: `18.3.1`\n- 💀 Minimum [@types/react-dom](https://www.npmjs.com/package/@types/react-dom) Version: `18.3.0`\n- 💀 Minimum [next](https://www.npmjs.com/package/next) Version: `14.2.3`\n\n\u0026nbsp;\n\n## **_Complementary Libraries:_**\n\n- [@best-skn/next-types](https://www.npmjs.com/package/@best-skn/next-types)\n\n\u0026nbsp;\n\n## **_Usage:_**\n\n### To install the package, type the following in console\n\n\u003e ```zsh\n\u003e npm add -D @best-skn/react-types\n\u003e #or\n\u003e yarn add -D @best-skn/react-types\n\u003e #or\n\u003e pnpm add -D @best-skn/react-types\n\u003e #or\n\u003e bun add -D @best-skn/react-types\n\u003e ```\n\n### Create a directory called `types` in the root location of your project, and create a file called `react.d.ts`, then do this\n\n\u003e ```typescript\n\u003e import \"@best-skn/react-types\";\n\u003e ```\n\n### Check your `tsconfig.json` if `includes` property has `**/*.ts` or not otherwise the type definition file may not work\n\n### Now Inside your Next.js 14 Project, use the package like this (Just an example)\n\n#### **_`SC/SFC` Type:_**\n\n#### For any `Server Components` except the `Layout Server Components`, do the following\n\n\u003e ##### **(a) Asynchronous:**\n\u003e\n\u003e ```typescript jsx\n\u003e // Location: app/page.tsx\n\u003e const Home: React.SC\u003cunknown\u003e = async () =\u003e {\n\u003e   return (\n\u003e     \u003cdiv\u003esomething...\u003c/div\u003e\n\u003e   );\n\u003e };\n\u003e\n\u003e export default Home;\n\u003e ```\n\u003e\n\u003e ##### **(b) Synchronous:**\n\u003e\n\u003e ```typescript jsx\n\u003e // Location: app/page.tsx\n\u003e const Home: React.SFC\u003cunknown\u003e = () =\u003e {\n\u003e   return (\n\u003e     \u003cdiv\u003esomething...\u003c/div\u003e\n\u003e   );\n\u003e };\n\u003e\n\u003e export default Home;\n\u003e ```\n\n#### **_`ChildrenProps` Type:_**\n\n#### For any kinds of `Functional Component (Server or Client)`, you can use like this if it needs `children` props\n\n\u003e ##### **(a) Server:**\n\u003e\n\u003e ```typescript jsx\n\u003e import type { ChildrenProps } from \"react\";\n\u003e\n\u003e const HomeComponent: React.SFC\u003cChildrenProps\u003e = (props) =\u003e {\n\u003e   const { children } = props;\n\u003e\n\u003e   return (\n\u003e     \u003cdiv\u003esomething...\u003c/div\u003e\n\u003e   );\n\u003e };\n\u003e\n\u003e export default HomeComponent;\n\u003e ```\n\u003e\n\u003e ##### **(b) Client:**\n\u003e\n\u003e ```typescript jsx\n\u003e \"use client\"\n\u003e\n\u003e import type { ChildrenProps } from \"react\";\n\u003e\n\u003e const HomeComponent: React.FC\u003cChildrenProps\u003e = (props) =\u003e {\n\u003e   const { children } = props;\n\u003e\n\u003e   return (\n\u003e     \u003cdiv\u003esomething...\u003c/div\u003e\n\u003e   );\n\u003e };\n\u003e\n\u003e export default HomeComponent;\n\u003e ```\n\n#### **_`SLC/SFLC` Type:_**\n\n#### For any `Layout Server Components`, do the following\n\n\u003e ##### **(a) Asynchronous case:**\n\u003e\n\u003e ```typescript jsx\n\u003e // Location: app/layout.tsx\n\u003e const RootLayout: React.SLC = async (props) =\u003e {\n\u003e   const { children } = props;\n\u003e\n\u003e   return (\n\u003e     \u003chtml lang=\"en\"\u003e\n\u003e       \u003cbody\u003e{children}\u003c/body\u003e\n\u003e     \u003c/html\u003e\n\u003e   );\n\u003e };\n\u003e\n\u003e export default RootLayout;\n\u003e ```\n\u003e\n\u003e ##### **(a) Synchronous case:**\n\u003e\n\u003e ```typescript jsx\n\u003e // Location: app/layout.tsx\n\u003e const RootLayout: React.SFLC = (props) =\u003e {\n\u003e   const { children } = props;\n\u003e\n\u003e   return (\n\u003e     \u003chtml lang=\"en\"\u003e\n\u003e       \u003cbody\u003e{children}\u003c/body\u003e\n\u003e     \u003c/html\u003e\n\u003e   );\n\u003e };\n\u003e\n\u003e export default RootLayout;\n\u003e ```\n\n\u0026nbsp;\n\n## **_Dedicated To:_**\n\n- 👩‍🎨`Prodipta Das Logno` \u0026 🧛‍♀️`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.\n- 💯`My Parents`: The greatest treasures of my life ever.\n\n\u0026nbsp;\n\n## **_License:_**\n\nCopyright (C) 2024 SKN Shukhan\n\nLicensed under the MIT License\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fskn437%2Fskn-react-types","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fskn437%2Fskn-react-types","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fskn437%2Fskn-react-types/lists"}