0.3.3 • Published 3 years ago
@saber2pr/react v0.3.3
@saber2pr/react
react in typescript.
yarn add @saber2pr/react
Examples
- CSR
render Component to DOM in browser.
import React, {
useCallBack,
useMemo,
useReducer,
useRef,
useState
} from "@saber2pr/react"
import ReactDOM from "@saber2pr/react/lib/client"
function HelloMessage({ name }: { name: string }) {
return <div>Hello {name}</div>
}
ReactDOM.render(
<HelloMessage name="Taylor" />,
document.getElementById("container")
)
- SSR
render Component to string.
import React from "@saber2pr/react"
import ReactDOMServer from "@saber2pr/react/lib/server"
const Content = ({ content }: { content: string }) => (
<div>
<div style={{ color: "red" }}>{content}</div>
<button onclick={() => console.log("click")}>click</button>
</div>
)
const App = () => {
return (
<div>
<div>This is a SSR Demo</div>
<Content content="has color" />
</div>
)
}
console.log(ReactDOMServer.renderToString(<App />))
- Custom Render
create a custom renderer.
import React from "@saber2pr/react"
import ReactFiberReconciler from "@saber2pr/react/lib/reconciler"
// use your host config.
const Renderer = ReactFiberReconciler(HostConfig)
const Store = {
state: 0
}
const TestCreateRenderer = () => {
const state = Store.state
return (
<div>
<hr />
<div>This is a UpdateContainer Test</div>
<div>{state}</div>
<button
onclick={() => {
Store.state++
// update
Renderer.updateContainer(<TestCreateRenderer />, container)
}}
>
add
</button>
</div>
)
}
// init render
Renderer.createContainer(
<TestCreateRenderer />,
document.getElementById("container")
)
Dev
yarn install
yarn start
yarn dev
License
MIT
Author: saber2pr
Reference
0.3.3
3 years ago
0.3.2
4 years ago
0.3.1
4 years ago
0.3.0
4 years ago
0.2.9
4 years ago
0.2.8
4 years ago
0.2.7
4 years ago
0.2.6
4 years ago
0.2.5
4 years ago
0.2.3
4 years ago
0.2.2
4 years ago
0.2.4
4 years ago
0.2.1
4 years ago
0.2.0
4 years ago
0.1.9
5 years ago
0.1.8
5 years ago
0.1.7
5 years ago
0.1.6
5 years ago
0.1.5
5 years ago
0.1.4
5 years ago
0.1.3
5 years ago
0.1.2
5 years ago
0.1.1
5 years ago
0.1.0
5 years ago
0.0.9
5 years ago
0.0.8
5 years ago
0.0.7
5 years ago
0.0.6
5 years ago
0.0.5
5 years ago
0.0.4
5 years ago
0.0.3
5 years ago
0.0.2
5 years ago
0.0.1
5 years ago