@liltrendi/reastify
v0.1.6
Published
Recursive module that converts html abstract syntax trees (AST's) into a renderable React element.
Downloads
12
Maintainers
Readme
Reastify
Recursive module that converts html abstract syntax trees (AST's) into a renderable React element.
This data follows the premise that it has one source of truth that branches into embedded (similar) children whose nodes are not known at compile time.
The AST that needs to be passed has a format similar to the one below:
let htmlAst = {
type: "root",
tagName: "p",
properties: {},
children: [
{
type: "text",
value: "hello world"
},
{
type: "element",
tagName: "p",
properties: {},
children: [
{
type: "element",
tagName: "a",
properties: {
href: "https://example.com/"
},
children: [
{
type: "text",
value: "www.example.com"
}
]
},
{
type: "element",
tagName: "table",
properties: {},
children: [
{
type: "element",
tagName: "thead",
properties: {},
children: [
//it goes on and on and on
]
}
]
},
{
type: "text",
value: "random sample"
},
]
}
],
}
Installation
You can use Yarn:
yarn add @liltrendi/reastify
Or npm:
npm i @liltrendi/reastify
Usage
Import it into your app
import {reastify} from "@liltrendi/reastify"
And pretty much pass the AST data to the reastify
function like so:
import React from "react"
import {reastify} from "@liltrendi/reastify"
const App = ({htmlAst}) => {
let yourElement = reastify(htmlAst)
return (
<React.Fragment>
{yourElement}
</React.Fragment>
)
}
export default App;
Props
The function uses a model based off of these typescript interfaces:
interface I_ReastifyNode {
type?: string;
tagName?: string;
children?: any[];
properties?: any;
value?: any;
}
interface I_ReastifyProps {
htmlAst?: I_ReastifyNode;
tableClassName?: string;
theadClassName?: string;
tbodyClassName?: string;
trClassName?: string;
tdClassName?: string;
thClassName?: string;
pClassName?: string;
h1ClassName?: string;
h2ClassName?: string;
h3ClassName?: string;
h4ClassName?: string;
h5ClassName?: string;
h6ClassName?: string;
imgClassName?: string;
brClassName?: string;
aClassName?: string;
uClassName?: string;
strongClassName?: string;
emClassName?: string;
ulClassName?: string;
olClassName?: string;
liClassName?: string;
preClassName?: string;
codeClassName?: string;
linkOnclick?: (event: React.MouseEvent<HTMLElement>) => any;
}
To Do
Abstract it into a class with helper methods. PRs are welcome.