Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/tjcccc/rejsui
JSX, But Declarative UI.
https://github.com/tjcccc/rejsui
declarative-ui jsx react
Last synced: 4 days ago
JSON representation
JSX, But Declarative UI.
- Host: GitHub
- URL: https://github.com/tjcccc/rejsui
- Owner: tjcccc
- License: mit
- Created: 2021-08-24T01:17:21.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2022-07-29T12:02:22.000Z (over 2 years ago)
- Last Synced: 2024-12-16T06:12:55.502Z (13 days ago)
- Topics: declarative-ui, jsx, react
- Language: JavaScript
- Homepage:
- Size: 690 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# rejsui
rejsui = JavaScript UI for React
(Developing)
## Install
```shell
npm i sjsx-ui
# or
yarn add sjsx-ui
```
## Usage
Import main function and components you need:
```jsx
import View, { HStack, VStack, Heading, Div, P } from 'sjsx-ui';
```
In React component, use `View()` for the `return` to replace classic JSX:
```jsx
const [content, setContent] = useState('Yes!');
const App = () => {
return View(
// SJSX code
// h1
H1('Title'),
// div
Div([
Div('Hello, world'),
Div(content)
])
);
}
```
### Void Elements
All [void elements (self-closing tags)](https://www.w3.org/TR/2011/WD-html-markup-20110113/syntax.html#syntax-elements) can be invoked by a function with the same capitalized name.
The attributes of a tag should be set as an object as related function's arguments.
```jsx
// 
Img({
src: 'example.jpg',
title: 'Example',
alt: 'image'
})
```
### Common Elements
All [common elements](https://www.w3.org/TR/2011/WD-html-markup-20110113/elements.html) can be invoked by a function with the same capitalized name.
There need two arguments. The first one is an array of its content. The second one is the attributes object.
```jsx
//
// Title
// Content.
//
Div([
H1('Title'), // or H1(['Title'])
P('Content')
], {
className: 'article',
style: { padding: '2px 8px' }
})
```
### Custom Elements
#### HStack, VStack
Like SwiftUI, these two components are used for layout.
HStack is for horizontal layout. VStack is for vertical layout.
```jsx
HStack([
Div('A'),
Div('B')
])
```
It will be parsed to such a JSX code:
```jsx
A
B
```
#### Heading
`Heading()` has three parameters. The first is to specify what `` is. For example, `Heading(1, ...)` means `
`. The second is its single string content. The last is its attributes.
```jsx
//
This is h1
Heading(1, 'This is h1', { style: { color: '#0000ff' } }),
//
This is h2
Heading(2, 'This is h2')
```
#### Text
`Text()` will display a string text with `` tag. You can set attributes as its second argument.
```jsx
// Red Text
Text('Red Text', { style: { color: '#ff0000' } })
```
#### Spacer
`Spacer()` will expand to fill the rest space in a flexbox container.
```jsx
HStack([
Div(),
Div(),
Spacer(),
Div()
]);
```