Kubb@kubb/react 🦙under construction ​
Use React to create templates/variants for any plugin.
Installation ​
shell
bun add @kubb/reactbun add @kubb/reactshell
pnpm add @kubb/reactpnpm add @kubb/reactshell
npm install @kubb/reactnpm install @kubb/reactshell
yarn add @kubb/reactyarn add @kubb/reactConfigure tsconfig.json ​
json
{
"compilerOptions": {
"jsx": "react-jsx",
"jsxImportSource": "@kubb/react"
}
}{
"compilerOptions": {
"jsx": "react-jsx",
"jsxImportSource": "@kubb/react"
}
}Examples ​
Text ​
tsx
import { createRoot, Text } from '@kubb/react'
const root = createRoot()
const Component = () => {
return (
<Text>
export const test = 2;
</File>
)
}
root.render(<Component />)
return rootimport { createRoot, Text } from '@kubb/react'
const root = createRoot()
const Component = () => {
return (
<Text>
export const test = 2;
</File>
)
}
root.render(<Component />)
return roottypescript
export const test = 2export const test = 2Text with indent ​
tsx
import { createRoot, Text } from '@kubb/react'
const root = createRoot()
const Component = () => {
return (
<Text indentSize={2}>
export const test = 2;
</File>
)
}
root.render(<Component />)
return rootimport { createRoot, Text } from '@kubb/react'
const root = createRoot()
const Component = () => {
return (
<Text indentSize={2}>
export const test = 2;
</File>
)
}
root.render(<Component />)
return roottypescript
export const test = 2export const test = 2Function ​
tsx
import { createRoot, Function } from '@kubb/react'
const root = createRoot()
const Component = () => {
return (
<Function name="getData" export async>
return 2;
</Function>
)
}
root.render(<Component />)
return rootimport { createRoot, Function } from '@kubb/react'
const root = createRoot()
const Component = () => {
return (
<Function name="getData" export async>
return 2;
</Function>
)
}
root.render(<Component />)
return roottypescript
export async function getData() {
return 2
}export async function getData() {
return 2
}File ​
tsx
import { createRoot, File } from '@kubb/react'
const root = createRoot()
const Component = () => {
return (
<File baseName="test.ts" path="path">
<File.Import name={'React'} path="react" print />
</File>
)
}
root.render(<Component />)
return rootimport { createRoot, File } from '@kubb/react'
const root = createRoot()
const Component = () => {
return (
<File baseName="test.ts" path="path">
<File.Import name={'React'} path="react" print />
</File>
)
}
root.render(<Component />)
return roottypescript
export function test() {
return true
}export function test() {
return true
}