Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/Nicify/react-jsbox
Custom React renderer for JSBox.
https://github.com/Nicify/react-jsbox
jsbox react react-reconciler
Last synced: about 2 months ago
JSON representation
Custom React renderer for JSBox.
- Host: GitHub
- URL: https://github.com/Nicify/react-jsbox
- Owner: Rel1cx
- License: mit
- Created: 2019-04-08T21:16:09.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-04-10T14:14:16.000Z (over 1 year ago)
- Last Synced: 2024-10-29T18:05:47.248Z (about 2 months ago)
- Topics: jsbox, react, react-reconciler
- Language: JavaScript
- Homepage:
- Size: 585 KB
- Stars: 82
- Watchers: 2
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-react-renderer - react-jsbox - React custom renderer for rendering native iOS UIKit with React + [JSBox](https://docs.xteko.com/#/en/uikit/intro) (Mobile)
README
Welcome to react-jsbox 👋
> A custom React renderer for writing JSBox apps in React.
npm:
React doc:
JSBox doc:
Example App:
## Examples
### Class
```jsx
import React from 'react'
import { render } from 'react-jsbox'
// Create React Components:
class App extends React.PureComponent {
constructor(props) {
super(props)
console.log(props)
this.state = {
count: 0
}
}
render() {
const { width, height } = this.props
const styles = {
container: $rect(0, 0, width, height),
text: $rect(0, height * 0.25 - 15, width, 30),
list: $rect(0, height * 0.5, width, 140)
}
return (
this.setState({
count: this.state.count + [1, -1, -this.state.count][row]
})
}}
/>
)
}
}
// Create JSBox root container and render the React component into it
$ui.render({
props: {
title: '',
debugging: true
},
views: [
{
type: 'view',
props: {
id: 'root'
},
layout(make, view) {
make.edges.equalTo(view.super.safeArea)
},
events: {
layoutSubviews(view) {
const { width, height } = view.frame
render(, view)
}
}
}
]
})
```
#### Use ref to access JSBox view instance
```jsx
import React from 'react'
import { render } from 'react-jsbox'
class App extends React.PureComponent {
constructor(props) {
super(props)
this.state = {
text: ''
}
this._input = React.createRef()
this._handleTextChange = this.handleTextChange.bind(this)
}
handleTextChange(sender) {
this.setState({ text: sender.text })
}
componentDidMount() {
this._input.current.focus()
}
render() {
const { width, height } = this.props
const styles = {
container: $rect(0, 0, width, height - 40),
text: $rect(0, 64, width, 30),
textInput: $rect(10, 160, width - 20, 48)
}
return (
this._input.current.blur()
}}
>
)
}
}
$ui.render({
props: {
title: '',
debugging: true
},
views: [
{
type: 'view',
props: {
id: 'root'
},
layout(make, view) {
make.edges.equalTo(view.super.safeArea)
},
events: {
layoutSubviews(view) {
const { width, height } = view.frame
render(, view)
}
}
}
]
})
```
### Hooks
#### useReducer
```jsx
import React, { useMemo } from 'react'
import { render } from 'react-jsbox'
function App({ width, height }) {
const [state, dispatch] = React.useReducer(counterReducer, { count: 0 })
const styles = useMemo(
() => ({
container: $rect(0, 0, width, height),
text: $rect(0, height * 0.25 - 15, width, 30),
list: $rect(0, height * 0.5, width, 140)
}),
[width, height]
)
return (
dispatch({ type: data })
}}
/>
)
}
const counterReducer = (state, action) => {
switch (action.type) {
case 'INCREASE':
return { ...state, count: state.count + 1 }
case 'DECREASE':
return { ...state, count: state.count - 1 }
case 'RESET':
return { ...state, count: 0 }
default:
throw new Error()
}
}
$ui.render({
props: {
title: '',
debugging: true
},
views: [
{
type: 'view',
props: {
id: 'root'
},
layout(make, view) {
make.edges.equalTo(view.super.safeArea)
},
events: {
layoutSubviews(view) {
const { width, height } = view.frame
render(, view)
}
}
}
]
})
```
#### useEffect
In **useCache.js**
```jsx
import { useEffect, useState } from 'react'
const useCache = (key, initialValue) => {
const [state, setState] = useState(() => {
const cacheValue = $cache.get(key)
if (cacheValue === undefined) {
$cache.set(key, initialValue)
return initialValue
}
return cacheValue
})
useEffect(() => $cache.set(key, state))
return [state, setState]
}
export default useCache
```
In **app.js**
```jsx
import React, { useMemo } from 'react'
import { render, useCache } from 'react-jsbox'
import useCache from './useCache'
function App({ width, height }) {
const [count, setCount] = useCache('count', 0)
const styles = useMemo(
() => ({
container: $rect(0, 0, width, height),
text: $rect(0, height * 0.25 - 15, width, 30),
list: $rect(0, height * 0.5, width, 140)
}),
[width, height]
)
return (
x + [1, -1, -x][row])
}
}}
/>
)
}
$ui.render({
props: {
title: '',
debugging: true
},
views: [
{
type: 'view',
props: {
id: 'root'
},
layout(make, view) {
make.edges.equalTo(view.super.safeArea)
},
events: {
layoutSubviews(view) {
const { width, height } = view.frame
render(, view)
}
}
}
]
})
```
#### JsxLiteral
```javascript
const htm = require('htm')
const { createElement, useState, useMemo } = require('react')
const ReactJSBox = require('react-jsbox')
const jsx = htm.bind(createElement)
function JsxLiteralExample({ width, height }) {
const [count, setCount] = useState(0)
const styles = useMemo(
() => ({
container: $rect(0, 0, width, height),
text: $rect(0, height * 0.25 - 15, width, 30),
list: $rect(0, height * 0.5, width, 140)
}),
[width, height]
)
return jsx`
{
setCount(x => x + [1, -1, -x][row])
}
}}
/>
`
}
$ui.render({
props: {
title: 'JsxLiteralExample'
},
views: [
{
type: 'view',
props: {
id: 'root'
},
layout(make, view) {
make.edges.equalTo(view.super.safeArea)
},
events: {
layoutSubviews(view) {
const { width, height } = view.frame
ReactJSBox.render(jsx`<${JsxLiteralExample} width=${width} height=${height} />`, view)
}
}
}
]
})
```
## Author
👤 **Eva1ent**
- Github: [@Nicify](https://github.com/Nicify)
## Show your support
Give a ⭐️ if this project helped you !