Categorygithub.com/woozard/go-react

modulepackage

0.0.2

Repository: https://github.com/woozard/go-react.git

Documentation: pkg.go.dev

# README

Golang React

Simple UI library done for fun and to experiment with golang.

Install

$ go get -u github.com/alindesign/go-react

Docs

A documentation about api it's available on GoDoc

Usage

Default example

package main

import (
    "fmt"
    "github.com/alindesign/go-react"
)

func List(num int) *react.Element {
    var items []*react.Element
    for i := 0; i < num; i++ {
        items = append(items, react.CreateElement("li", react.Props{
            "className": fmt.Sprintf("list__item item-%d", i+1),
        }, react.Text("Item %d", i+1)))
    }

    return react.CreateElement("ul", react.Props{
        "className": "list__root",
    }, items...)
}

func App() *react.Element {
    return react.CreateElement("div", react.Props{
        "className": "root",
    }, List(4))
}

func main () {
    html := react.Render(App())
    
    fmt.Printf("Output: %s\n", html)
}

// Output: <div class="root"><ul class="list__root"><li class="list__item item-1">Item 1</li><li class="list__item item-2">Item 2</li><li class="list__item item-3">Item 3</li><li class="list__item item-4">Item 4</li></ul></div>

Elements

Built in shortcuts to HTML elements

element := react.H1(nil, react.Text("child 2"))
div := react.Div(nil, react.Text("child 1"), element)

Fragments

fragment := react.Fragment(
    react.H1(nil, react.Text("Title")),
    react.H3(nil, react.Text("text")),
)

Styles

Style properties will be converted to kebab-case so backgroundColor will become background-color

style := react.Style {
    "color": "#444",
    "backgroundColor": "#ecf0f1",
    "font-size": "14px",
}

Props

Properties will be converted to kebab-case so DataString will become data-string

div := react.Div(react.Props{
    "className": "simple-div",
    "style": react.Style {
        "color": "#444",
        "backgroundColor": "#ecf0f1",
        "font-size": "14px",
    },
}, 
    react.Text("Hello world!"),
)

Document

Create a simple html boilerplate

doc := react.Document(nil, nil)
// will render to: 
// <!doctype html><html lang="en"><head></head><body></body></html> 

customDoc := react.Document(&react.DocumentProps{
    BodyProps: react.Props{ "className": "body" },
    Body: react.H1(nil, react.Text("Hello!")),
}, nil) 
// will render to:
// <!doctype html><html lang="en"><head></head><body class="body"><h1>Hello!</h1></body></html>

Components

// Func components
func SimpleComponent (ctx *react.Context) *react.Element { 
    return react.Span(nil, react.Text("Hello!"))
}
custom := react.Component(SimpleComponent)
// will render to:
// <span>Hello!</span>

// Struct components
type SimpleComponent struct {}

func (s *SimpleComponent) Render (ctx *react.Context) *react.Element { 
    return react.Span(nil, react.Text("Hello!"))
}

custom := react.Component(&SimpleComponent{})
// will render to:
// <span>Hello!</span>

Render

Default renderers

html := react.Render(react.H1(nil, react.Text("Hello!"))) // <h1>Hello!</h1>

html := react.RenderWithStats(react.H1(nil, react.Text("Hello!")))
// Print rendered nodes and time 
// <h1>Hello!</h1>

html := react.RenderToBytes(react.H1(nil, react.Text("Hello!"))) // render []byte("<h1>Hello!</h1>")

Passing data to context

func Greeter (ctx *react.Context) *react.Element {
    return react.H1(nil, react.Text("Hello %s!", ctx.GetString("name")))
}
html := react.Render(react.Component(Greeter), map[string]interface{}{
    "name": "Joe",
}) // <h1>Hello Joe!</h1>

Custom Renderer

element := react.H1(nil, react.Text("Hi!"))
renderer := react.NewRenderer(element)
html := renderer.String()

Notes

Any text should be a react element instance:

text := react.Text("Hi there!") // Hi there!
hello := react.Text("Hi there, %s!", "Joe") // Hi there, Joe!
h1 := react.H1(nil, react.Text("Hi there!")) // <h1>Hi there!</h1>

Background

After a long night of no sleep and thinking on a better way to reuse HTML on golang, I started to search for something that has the possibility to create reusable components like on go lang, but without any success and tons of Javascript & React hours, I was thinking to adopt React component definition style, and implemented it in the way I was thinking they have done it.

Contributing

If you have ideas or improvements you can contribute to this library.

Disclaimer

I have done the project pure for fun and experimenting new things, I don't think that my implementation it's the best, so if you think that something can be improved, submit your PR.

TODO

Clean up
Improve performance

# Functions

A

No description provided by the author

Abbr

No description provided by the author

Address

No description provided by the author

Area

No description provided by the author

Article

No description provided by the author

Aside

No description provided by the author

Audio

No description provided by the author

B

No description provided by the author

Base

No description provided by the author

Bdi

No description provided by the author

Bdo

No description provided by the author

Blockquote

No description provided by the author

Body

No description provided by the author

Br

No description provided by the author

Button

No description provided by the author

Canvas

No description provided by the author

Caption

No description provided by the author

Cite

No description provided by the author

Code

No description provided by the author

Col

No description provided by the author

Colgroup

No description provided by the author

Comment

No description provided by the author

Component

No description provided by the author

CreateElement

No description provided by the author

CreateFragment

No description provided by the author

CSS

No description provided by the author

CSSString

No description provided by the author

Data

No description provided by the author

Datalist

No description provided by the author

Dd

No description provided by the author

Del

No description provided by the author

Details

No description provided by the author

Dfn

No description provided by the author

Dialog

No description provided by the author

Div

No description provided by the author

Dl

No description provided by the author

Doctype

No description provided by the author

Document

No description provided by the author

Dt

No description provided by the author

Em

No description provided by the author

Embed

No description provided by the author

Fieldset

No description provided by the author

Figure

No description provided by the author

Form

No description provided by the author

Fragment

No description provided by the author

H1

No description provided by the author

H2

No description provided by the author

H3

No description provided by the author

H4

No description provided by the author

H5

No description provided by the author

H6

No description provided by the author

Head

No description provided by the author

Hgroup

No description provided by the author

Hr

No description provided by the author

Html

No description provided by the author

HTML

No description provided by the author

HTMLString

No description provided by the author

I

No description provided by the author

Iframe

No description provided by the author

Img

No description provided by the author

Input

No description provided by the author

Ins

No description provided by the author

JS

No description provided by the author

JSString

No description provided by the author

Kbd

No description provided by the author

Keygen

No description provided by the author

Label

No description provided by the author

Legend

No description provided by the author

Li

No description provided by the author

Link

No description provided by the author

Main

No description provided by the author

Map

No description provided by the author

Mark

No description provided by the author

Menuitem

No description provided by the author

# Constants

TYPE_COMPONENT

noinspection GoSnakeCaseUsage.

TYPE_COMPONENT_STRUCT

noinspection GoSnakeCaseUsage.

TYPE_CSS

noinspection GoSnakeCaseUsage.

TYPE_ELEMENT

noinspection GoSnakeCaseUsage.

TYPE_FRAGMENT

noinspection GoSnakeCaseUsage.

TYPE_HTML

noinspection GoSnakeCaseUsage.

TYPE_JS

noinspection GoSnakeCaseUsage.

TYPE_TEXT

noinspection GoSnakeCaseUsage.

# Structs

Context

No description provided by the author

DocumentProps

No description provided by the author

Element

No description provided by the author

Renderer

No description provided by the author

# Interfaces

ComponentStruct

No description provided by the author

# Type aliases

ComponentFunc

No description provided by the author

Props

No description provided by the author

Style

No description provided by the author