TypeScript
I made this library so that I can use it in all of my Elysia.js projects without writing the same codes over and over again
- As the name suggests, it is an interface for JSX props holding
childrenproperty - For usage instruction, see
Usagesection
- An interface that extends
JSXChildrenProps - In addition to
childrenproperty, it holdslang,desc,kwd,title,icnproperties - This interface is good for HTML meta info
- For usage instruction, see
Usagesection
- This type definition is for JSX Component
- It takes a Generic type as its props type
- Returns a JSX component
- For usage instruction, see
Usagesection
- As the name suggests, this type definition is just like
JSXComponentbut without props - It does not need a Generic type as it has no props
- Returns a JSX component
- For usage instruction, see
Usagesection
- Elysia.js
- Elysia.js HTML
This library is intended to be used in Elysia.js HTML of minimum 1.2.0. It may or may not work on 2.x
- 💀 Minimum elysia Version:
1.2.25 - 💀 Minimum @elysiajs/html Version:
1.2.0
npm add -D @best-skn/elysia-html-types #or yarn add -D @best-skn/elysia-html-types #or pnpm add -D @best-skn/elysia-html-types #or bun add -D @best-skn/elysia-html-types
Create a directory called types in the root location of your project, and create a file called elysia.d.ts, then do this
import "@best-skn/elysia-html-types";
Check your tsconfig.json if includes property has **/*.ts, **/*.tsx or not otherwise the type definition file may not work
import { Html, type JSXChildrenProps, type JSXComponent } from "@elysiajs/html"; const HomeRoute: JSXComponent<JSXChildrenProps> = (props) => { const { children } = props; return ( <div>{children}</div> ); }; export default HomeRoute;
import { Html, type JSXBasicProps, type JSXComponent } from "@elysiajs/html"; const BaseHtml: JSXComponent<JSXBasicProps> = (props) => { const { children, lang, desc, kwd, title, icn } = props; return ( <html lang={lang}> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="description" content={desc ?? "Elysia Web Application"} /> <meta name="keywords" content={kwd ?? "Elysia, Bun, TypeScript"} /> <title>{title ?? "Elysia App"}</title> <link rel="icon" href={icn ?? "/public/icons/logo.svg"} /> </head> <body> <main>{children}</main> </body> </html> ); }; export default BaseHtml;
import { Html, type JSXChildrenProps, type JSXComponent } from "@elysiajs/html"; const HomeRoute: JSXComponent<JSXChildrenProps> = (props) => { const { children } = props; return ( <div>{children}</div> ); }; export default HomeRoute;
import { Html, type JSXComponentNoProps } from "@elysiajs/html"; const HomeRoute: JSXComponentNoProps = () => (<div>Hello from Elysia!</div>); export default HomeRoute;
- 👩🎨
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.
Copyright (C) 2024 SKN Shukhan
Licensed under the MIT License