react

package module
v0.4.0 Latest Latest
Warning

This package is not in the latest version of its module.

 Go to latest Published: Dec 8, 2023 License: MIT Imports: 10 Imported by: 0

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.Textf("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.Textf("Hello %s!", ctx.GetString("name")))
}
html := react.Render(react.Component(Greeter), map[string]any{
    "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.Textf("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

Documentation

Index

Constants

View Source 
const (
	TYPE_ELEMENT = iota
	TYPE_FRAGMENT
	TYPE_COMPONENT
	TYPE_COMPONENT_STRUCT
	TYPE_TEXT
	TYPE_JS
	TYPE_CSS
	TYPE_HTML
)

noinspection GoSnakeCaseUsage

Variables

This section is empty.

Functions

func Render 

func Render(component *Element, data ...map[string]any) string

func RenderToBytes added in v0.2.2 

func RenderToBytes(component *Element, data ...map[string]any) []byte

func RenderToBytesWithStats added in v0.2.2 

func RenderToBytesWithStats(component *Element, data ...map[string]any) []byte

func RenderWithStats 

func RenderWithStats(component *Element, data ...map[string]any) string

Types

type ComponentFunc 

type ComponentFunc func(ctx *Context) *Element

type ComponentStruct 

type ComponentStruct interface {
	Render(ctx *Context) *Element
}

type Context 

type Context struct {
	// contains filtered or unexported fields
}

func NewContext 

func NewContext() *Context

func NewContextWithData 

func NewContextWithData(data map[string]any) *Context

func (*Context) CountNode 

func (c *Context) CountNode()

func (*Context) Get 

func (c *Context) Get(key string, defaultValue ...any) any

func (*Context) GetBool 

func (c *Context) GetBool(key string, defaultValue ...bool) bool

func (*Context) GetString 

func (c *Context) GetString(key string, defaultValue ...string) string

func (*Context) Has 

func (c *Context) Has(key string) bool

func (*Context) Set 

func (c *Context) Set(key string, data any) *Context

func (*Context) SetData 

func (c *Context) SetData(data map[string]any)

func (*Context) Stats 

func (c *Context) Stats()

func (*Context) Unset 

func (c *Context) Unset(key string) *Context

type DocumentProps 

type DocumentProps struct {
	Head      *Element
	HeadProps Props

	Body      *Element
	BodyProps Props

	Doctype string
}

type Element 

type Element struct {
	Type   int
	Tag    string
	Props  Props
	Childs []*Element
	Text   string
	CSS    template.CSS
	JS     template.JS
	HTML   template.HTML
	// contains filtered or unexported fields
}

func A 

func A(props Props, children ...*Element) *Element

func Abbr 

func Abbr(props Props, children ...*Element) *Element

func Address 

func Address(props Props, children ...*Element) *Element

func Area 

func Area(props Props, children ...*Element) *Element

func Article 

func Article(props Props, children ...*Element) *Element

func Aside 

func Aside(props Props, children ...*Element) *Element

func Audio 

func Audio(props Props, children ...*Element) *Element

func B 

func B(props Props, children ...*Element) *Element

func Base 

func Base(props Props, children ...*Element) *Element

func Bdi 

func Bdi(props Props, children ...*Element) *Element

func Bdo 

func Bdo(props Props, children ...*Element) *Element

func Blockquote 

func Blockquote(props Props, children ...*Element) *Element

func Body 

func Body(props Props, children ...*Element) *Element

func Br 

func Br() *Element

func Button 

func Button(props Props, children ...*Element) *Element

func CSS 

func CSS(css template.CSS) *Element

func CSSString 

func CSSString(css string, args ...any) *Element

func Canvas 

func Canvas(props Props, children ...*Element) *Element

func Caption 

func Caption(props Props, children ...*Element) *Element

func Cite 

func Cite(props Props, children ...*Element) *Element

func Code 

func Code(props Props, children ...*Element) *Element

func Col 

func Col(props Props, children ...*Element) *Element

func Colgroup 

func Colgroup(props Props, children ...*Element) *Element

func Comment 

func Comment(comment string, args ...any) *Element

func Component 

func Component(component any) *Element

func CreateElement 

func CreateElement(tag string, props Props, childs ...*Element) *Element

func CreateFragment 

func CreateFragment(childs ...*Element) *Element

func Data 

func Data(props Props, children ...*Element) *Element

func Datalist 

func Datalist(props Props, children ...*Element) *Element

func Dd 

func Dd(props Props, children ...*Element) *Element

func Del 

func Del(props Props, children ...*Element) *Element

func Details 

func Details(props Props, children ...*Element) *Element

func Dfn 

func Dfn(props Props, children ...*Element) *Element

func Dialog 

func Dialog(props Props, children ...*Element) *Element

func Div 

func Div(props Props, children ...*Element) *Element

func Dl 

func Dl(props Props, children ...*Element) *Element

func Doctype 

func Doctype(doctype ...any) *Element

func Document 

func Document(documentProps *DocumentProps, props Props) *Element

func Dt 

func Dt(props Props, children ...*Element) *Element

func Em 

func Em(props Props, children ...*Element) *Element

func Embed 

func Embed(props Props, children ...*Element) *Element

func Fieldset 

func Fieldset(props Props, children ...*Element) *Element

func Figure 

func Figure(props Props, children ...*Element) *Element
func Footer(props Props, children ...*Element) *Element

func Form 

func Form(props Props, children ...*Element) *Element

func Fragment 

func Fragment(childs ...*Element) *Element

func H1 

func H1(props Props, children ...*Element) *Element

func H2 

func H2(props Props, children ...*Element) *Element

func H3 

func H3(props Props, children ...*Element) *Element

func H4 

func H4(props Props, children ...*Element) *Element

func H5 

func H5(props Props, children ...*Element) *Element

func H6 

func H6(props Props, children ...*Element) *Element

func HTML 

func HTML(html template.HTML) *Element

func HTMLString 

func HTMLString(html string, args ...any) *Element
func Head(props Props, children ...*Element) *Element
func Header(props Props, children ...*Element) *Element

func Hgroup 

func Hgroup(props Props, children ...*Element) *Element

func Hr 

func Hr(props ...Props) *Element

func Html 

func Html(props Props, children ...*Element) *Element

func I 

func I(props Props, children ...*Element) *Element

func Iframe 

func Iframe(props Props, children ...*Element) *Element

func Img 

func Img(source any, alt string, props ...Props) *Element

func Input 

func Input(props Props) *Element

func Ins 

func Ins(props Props, children ...*Element) *Element

func JS 

func JS(js template.JS) *Element

func JSString 

func JSString(js string, args ...any) *Element

func Kbd 

func Kbd(props Props, children ...*Element) *Element

func Keygen 

func Keygen(props Props, children ...*Element) *Element

func Label 

func Label(props Props, children ...*Element) *Element

func Legend 

func Legend(props Props, children ...*Element) *Element

func Li 

func Li(props Props, children ...*Element) *Element
func Link(rel string, href any, props Props) *Element

func Main 

func Main(props Props, children ...*Element) *Element

func Map 

func Map(props Props, children ...*Element) *Element

func Mark 

func Mark(props Props, children ...*Element) *Element
func Menu(props Props, children ...*Element) *Element
func Menuitem(props Props, children ...*Element) *Element

func Meta 

func Meta(name, content string, props Props) *Element

func MetaCharset 

func MetaCharset(charset ...string) *Element

func MetaItemProp 

func MetaItemProp(name, content string, props Props) *Element

func MetaProperty 

func MetaProperty(name, content string, props Props) *Element

func Meter 

func Meter(props Props, children ...*Element) *Element
func Nav(props Props, children ...*Element) *Element

func Noscript 

func Noscript(children ...*Element) *Element

func Object 

func Object(props Props, children ...*Element) *Element

func Ol 

func Ol(props Props, children ...*Element) *Element

func Optgroup 

func Optgroup(props Props, children ...*Element) *Element

func Option 

func Option(props Props, children ...*Element) *Element

func Output 

func Output(props Props, children ...*Element) *Element

func P 

func P(props Props, children ...*Element) *Element

func Param 

func Param(props Props, children ...*Element) *Element

func Pre 

func Pre(props Props, children ...*Element) *Element

func Progress 

func Progress(props Props, children ...*Element) *Element

func Q 

func Q(props Props, children ...*Element) *Element

func Rb 

func Rb(props Props, children ...*Element) *Element

func Rp 

func Rp(props Props, children ...*Element) *Element

func Rt 

func Rt(props Props, children ...*Element) *Element

func Rtc 

func Rtc(props Props, children ...*Element) *Element

func Ruby 

func Ruby(props Props, children ...*Element) *Element

func S 

func S(props Props, children ...*Element) *Element

func Samp 

func Samp(props Props, children ...*Element) *Element

func Script 

func Script(source any, props Props) *Element

func Section 

func Section(props Props, children ...*Element) *Element

func Select 

func Select(props Props, children ...*Element) *Element

func Small 

func Small(props Props, children ...*Element) *Element

func Source 

func Source(props Props, children ...*Element) *Element

func Span 

func Span(props Props, children ...*Element) *Element

func Strong 

func Strong(props Props, children ...*Element) *Element

func StyleTag 

func StyleTag(style template.CSS, props ...Props) *Element

func Sub 

func Sub(props Props, children ...*Element) *Element

func Summary 

func Summary(props Props, children ...*Element) *Element

func Sup 

func Sup(props Props, children ...*Element) *Element

func Table 

func Table(props Props, children ...*Element) *Element

func Tbody 

func Tbody(props Props, children ...*Element) *Element

func Td 

func Td(props Props, children ...*Element) *Element

func Template 

func Template(props Props, children ...*Element) *Element

func Text 

func Text(text string) *Element

func Textarea 

func Textarea(props Props, children ...*Element) *Element

func Textf added in v0.3.1 

func Textf(format string, args ...any) *Element

func Tfoot 

func Tfoot(props Props, children ...*Element) *Element

func Th 

func Th(props Props, children ...*Element) *Element

func Thead 

func Thead(props Props, children ...*Element) *Element

func Time 

func Time(props Props, children ...*Element) *Element

func Title 

func Title(title string, args ...any) *Element

func Tr 

func Tr(props Props, children ...*Element) *Element

func Track 

func Track(props Props, children ...*Element) *Element

func U 

func U(props Props, children ...*Element) *Element

func Ul 

func Ul(props Props, children ...*Element) *Element

func Var 

func Var(props Props, children ...*Element) *Element

func Video 

func Video(props Props, children ...*Element) *Element

func Wbr 

func Wbr(props Props, children ...*Element) *Element

func (*Element) Append added in v0.2.2 

func (e *Element) Append(el *Element) *Element

func (*Element) Prepend added in v0.2.2 

func (e *Element) Prepend(el *Element) *Element

func (*Element) SetProp added in v0.2.2 

func (e *Element) SetProp(prop string, value any) *Element

type Props 

type Props map[string]any

func NewProps 

func NewProps() Props

func (Props) Get 

func (p Props) Get(key string) string

func (Props) Has 

func (p Props) Has(key string) bool

func (Props) String 

func (p Props) String() string

type Renderer 

type Renderer struct {
	Context             *Context
	Component           *Element
	MaxConcurrentChunks int
}

func NewRenderer 

func NewRenderer(component *Element) *Renderer

func (*Renderer) Bytes 

func (r *Renderer) Bytes() []byte

func (*Renderer) SetContext 

func (r *Renderer) SetContext(ctx *Context) *Renderer

func (*Renderer) SetData 

func (r *Renderer) SetData(data ...map[string]any) *Renderer

func (*Renderer) Stats 

func (r *Renderer) Stats()

func (*Renderer) String 

func (r *Renderer) String() string

type Style 

type Style map[string]string

func (Style) String 

func (s Style) String() string

Source Files

View all Source files

Jump to

Keyboard shortcuts

? : This menu
/ : Search site
f or F : Jump to
y or Y : Canonical URL
go.dev uses cookies from Google to deliver and enhance the quality of its services and to analyze traffic. Learn more.