JSX renderer with support for Custom Elements
npm install @atomify/jsxsh
npm i @atomify/jsx
`Configuration
@atomify/jsx requires and @babel/plugin-transform-react-jsx.`sh
npm install --save-dev @babel/plugin-syntax-jsx @babel/plugin-transform-react-jsx
yarn add --dev @babel/plugin-syntax-jsx @babel/plugin-transform-react-jsx
`After you installed the plugins you no need to configure your Babel Settings
json
{
"plugins": [
"@babel/plugin-syntax-jsx",
["@babel/plugin-transform-react-jsx", { "pragma": "h" }]
]
}
`and add the following to your tsconfig.json:
json
"compilerOptions": {
"jsx": "react",
"jsxFactory": "h",
}
`@atomify/jsx works together with
Render function
To get started using @atomify/jsx, first look at the render() function. This function accepts a tree description and creates the structure described. Next, it appends this structure to a parent DOM element provided as the second argument:tsx
import { h, render } from '@atomify/jsx';
function Title(text: string) {
return {text}
}
render(
`Serverside rendering
is shipped with a renderToString that will functional components into HTML string for SSR usage.`tsx
import { renderToString } from '@atomify/jsx'
function Title(text: string) {
return {text}
}const result = renderToString(
console.log(result) //
Hello world
`@atomify/hooks
tsx
import { h , Fragment } from '@atomify/jsx';
import { defineElement, useProp} from '@atomify/hooks';const CustomElement: FCE = () => {
const [title] = useProp('title', 'Hello world!');
return (
{ title }
Example title2
);
};
CustomElement.props = {
someTitle: {
type: Number,
reflectToAttr: true,
}
};
defineElement('custom-element', CustomElement);
`Class and Classname
Both and className are supported. The class attribute doesnt support object or array anymore since version 2.0 it will be using a plugin that can be installed through @atomify/shared (it accepts a string, array, object or everything combined):`tsx
import { classNames } from '@atomify/shared';
{ test1: true, test2: false }, [
'1',
false,
])}>
Ref
The attribute accepts a function or a direct ref object. The ref object must include the current` property.