diff --git a/README.md b/README.md index 3de9f8d..08d8818 100644 --- a/README.md +++ b/README.md @@ -24,7 +24,7 @@ See [Tutorial here](https://medium.com/@rocketlaunchr.cloud/go-with-react-de5ee4 ## Dependencies -- [React 16.5.2](https://www.npmjs.com/package/react) (it will probably work with lower) +- [React 18.2.0](https://www.npmjs.com/package/react) (it will probably work with lower) - [Gopherjs](https://github.com/gopherjs/gopherjs) (Go to Javascript transpiler) - [create-react-class](https://www.npmjs.com/package/create-react-class) - [react-addons-pure-render-mixin](https://www.npmjs.com/package/react-addons-pure-render-mixin) (optional: For creating a `PureComponent`) diff --git a/examples/event_handling/main.go b/examples/event_handling/main.go index febd46b..d608501 100644 --- a/examples/event_handling/main.go +++ b/examples/event_handling/main.go @@ -6,7 +6,7 @@ import ( ) func main() { - domTarget := react.GetElementByID("app") + domTarget := react.CreateRoot(react.GetElementByID("app")) // An example using Functional Components // See: https://reactjs.org/docs/components-and-props.html diff --git a/examples/uptime/main.go b/examples/uptime/main.go index 0c999eb..a703041 100644 --- a/examples/uptime/main.go +++ b/examples/uptime/main.go @@ -5,7 +5,7 @@ import ( ) func main() { - domTarget := react.GetElementByID("app") + domTarget := react.CreateRoot(react.GetElementByID("app")) title := "UPTIME TIMER" diff --git a/react.go b/react.go index 203c05b..6bacc50 100644 --- a/react.go +++ b/react.go @@ -44,10 +44,12 @@ func GetElementByID(id string, dom ...*js.Object) *js.Object { return js.Global.Get("document").Call("getElementById", id) } -// Render will render component to the specified target dom element. -func Render(element *js.Object, domTarget *js.Object, callback ...func()) *js.Object { - if len(callback) > 0 && callback[0] != nil { - return ReactDOM.Call("render", element, domTarget, callback[0]) - } - return ReactDOM.Call("render", element, domTarget) +// CreateRoot will create a root from the specified target dom element. +func CreateRoot(domTarget *js.Object) *js.Object { + return ReactDOM.Call("createRoot", domTarget) +} + +// Render will render component to the specified root. +func Render(element *js.Object, domTarget *js.Object) *js.Object { + return domTarget.Call("render", element) }