Documentation
¶
Overview ¶
Package react provides basic React bindings for GopherJS. This is not an exhaustive React binding, but provides enough functionality to create React components and use React hooks needed by the playground application.
Index ¶
- Variables
- func GetProp[T any](p Props, key string) T
- func Memo(component any) any
- func UseContext[T any](ctx Context[T]) T
- func UseEffect(effect func(), deps []any)
- func UseEffectWithCleanup(effect func() func(), deps []any)
- func UseId() string
- func UseImperativeHandle[T any](ref ValueRef[T], createHandle func() T, deps []any)
- func UseLayoutEffect(effect func(), deps []any)
- func UseLayoutEffectWithCleanup(effect func() func(), deps []any)
- func UseMemo[T any](compute func() T, deps []any) T
- func UseSyncExternalStore[T any](subscribe func(onStoreChange func()) func(), getSnapshot func() T) T
- type Context
- type Element
- func A(href string, props Props, children ...Node) *Element
- func Button(id, value string, props Props, onClick Func) *Element
- func CreateElement(typ any, props any, children ...Node) *Element
- func Div(props Props, children ...Node) *Element
- func Fragment(children ...Node) *Element
- func Pre(props Props, children ...Node) *Element
- func Span(props Props, children ...Node) *Element
- func StrictMode(children ...Node) *Element
- func TextArea(props Props, children ...Node) *Element
- type Func
- type Node
- type Props
- func (p Props) Get(key string) *js.Object
- func (p Props) GetBool(key string) bool
- func (p Props) GetFloat(key string) float64
- func (p Props) GetFunc(key string) Func
- func (p Props) GetInt(key string) int
- func (p Props) GetRef(key string) Ref
- func (p Props) GetString(key string) string
- func (p Props) Has(key string) bool
- func (p Props) Set(key string, value any) Props
- type Ref
- type Root
- type ValueRef
Constants ¶
This section is empty.
Variables ¶
var ( ErrReactDOMClientNotLoaded = errors.New(`react: ReactDOMClient is not loaded`) ErrReactNotLoaded = errors.New(`react: React is not loaded`) ErrUndefinedPropKey = errors.New(`react: undefined prop key`) ErrUninitializedValueRef = errors.New(`react: uninitialized value ref`) ErrMissingGoValue = errors.New(`react: missing value in go value registry`) )
var ( ReactDOMClient *js.Object React *js.Object )
Functions ¶
func Memo ¶
Memo prevents a component from re-rendering when its props haven't changed. Without this, every child re-renders whenever the parent renders, even if nothing relevant changed.
func UseContext ¶
func UseContext[T any](ctx Context[T]) T
UseContext is called from a component to looks up the information for the context that wraps that component.
func UseEffect ¶
func UseEffect(effect func(), deps []any)
UseEffect registers an effect function that is called after rendering. The effect is re-run whenever any of the dependencies change.
If nil is given for the dependencies, the effect is re-run after every render. If an empty `[]any{}` is given for the dependencies, the effect is only run once after the initial render. Setters, Funcs, and Refs should be stablized so should normally not need to be used as dependencies. The number and order of dependencies must remain consistent.
func UseEffectWithCleanup ¶
func UseEffectWithCleanup(effect func() func(), deps []any)
UseEffectWithCleanup registers an effect function that is called after rendering. The effect is re-run whenever any of the dependencies change.
If nil is given for the dependencies, the effect is re-run after every render. If an empty `[]any{}` is given for the dependencies, the effect is only run once after the initial render. Setters, Funcs, and Refs should be stablized so should normally not need to be used as dependencies. The number and order of dependencies must remain consistent.
The effect function returns a cleanup function that is called before the effect is re-run or when the component is unmounted. See: https://react.dev/reference/react/useEffect
func UseId ¶
func UseId() string
UseID generates a stable unique ID for accessibility attributes.
Do not call useId to generate keys in a list.
func UseImperativeHandle ¶
UseImperativeHandle exposes an imperative handle to a parent component via a ref passed as a prop. The createHandle function is called to produce the handle value, and it is re-created whenever deps change. On unmount (or before re-creation), the handle is cleared to the zero value.
Typically the handle type is an interface that a component will populate with a struct that implements that interface. This provides the parent component with a way to call into the child component to perform specific events in a much more conveniant way than using a Ref alone.
If nil is given for the dependencies, createHandle is re-run after every render. If an empty `[]any{}` is given for the dependencies, createHandle is only run once after the initial render. Setters, Funcs, and Refs should be stablized so should normally not need to be used as dependencies. The number and order of dependencies must remain consistent.
func UseLayoutEffect ¶
func UseLayoutEffect(effect func(), deps []any)
UseLayoutEffect registers an effect function that is called before rendering. The effect is re-run whenever any of the dependencies change.
UseLayoutEffect can hurt performance. Prefer UseEffect when possible.
If nil is given for the dependencies, the effect is re-run before every render. If an empty `[]any{}` is given for the dependencies, the effect is only run once before the initial render. Setters, Funcs, and Refs should be stablized so should normally not need to be used as dependencies. The number and order of dependencies must remain consistent.
func UseLayoutEffectWithCleanup ¶
func UseLayoutEffectWithCleanup(effect func() func(), deps []any)
UseLayoutEffectWithCleanup registers an effect function that is called before rendering. The effect is re-run whenever any of the dependencies change.
UseLayoutEffectWithCleanup can hurt performance. Prefer UseEffectWithCleanup when possible.
If nil is given for the dependencies, the effect is re-run before every render. If an empty `[]any{}` is given for the dependencies, the effect is only run once before the initial render. Setters, Funcs, and Refs should be stablized so should normally not need to be used as dependencies. The number and order of dependencies must remain consistent.
The effect function returns a cleanup function that is called before the effect is re-run or when the component is unmounted. See: https://react.dev/reference/react/useLayoutEffect
func UseMemo ¶
UseMemo memoizes the result of a computation function. The computation is only re-run when any of the dependencies change.
If nil is given for the dependencies, the computation is re-run for every render. If an empty `[]any{}` is given for the dependencies, the computation is only run once for the initial render. Setters, Funcs, and Refs should be stablized so should normally not need to be used as dependencies. The number and order of dependencies must remain consistent.
func UseSyncExternalStore ¶
func UseSyncExternalStore[T any](subscribe func(onStoreChange func()) func(), getSnapshot func() T) T
UseSyncExternalStore subscribes to an external store and returns its current snapshot. React will call getSnapshot to read the current value and re-render whenever subscribe's onStoreChange callback is called.
subscribe is called with an onStoreChange callback and must return an unsubscribe function. If a different subscribe function is passed during a re-render, React will re-subscribe to the store using the newly passed subscribe function.
getSnapshot must return the current store value. The store snapshot returned by getSnapshot must be immutable.
T must be a type that survives JS round-tripping (string, int, float64, bool, *js.Object) and is comparable via Object.is(). Go types such as interfaces and structs may not be used.
Types ¶
type Context ¶
Context is a context component creater.
See: https://react.dev/reference/react/createContext
func CreateContext ¶
func CreateContext[T any](defaultValue T) Context[T]
CreateContext lets you create a context that components can provide or read. Call CreateContext outside of any components to create a context. This allows context to be passed into child components without having to pass the context as a prop.
T must be a type that survives JS round-tripping (string, int, float64, bool, *js.Object)
func (Context[T]) Provider ¶
Provider creates the component element for the given context.
See: https://react.dev/reference/react/createContext#provider
type Element ¶
Element is a React element created with CreateElement(). It represents a UI component and can be rendered into the DOM. See: https://react.dev/reference/react/createElement
func Button ¶
Button creates a button input element with the given value, properties, and onClick handler. The onClick handler is added to the props as the `onClick` property and is called when the button is clicked.
func CreateElement ¶
CreateElement creates a React element of the given type with the given props and children.
The type can be a string for HTML elements (e.g. `div`, `span`, etc.), or a React component (function or class). The props can be nil if there are no properties to set, a Props map, or a struct for typed props. Children can be zero or more React nodes to be nested inside the element. See: https://react.dev/reference/react/createElement
func Fragment ¶
Fragments groups items without a wrapping element. The Fragments "disappears" from the DOM such that only its children are rendered as siblings to the Fragment's sibling elements. See: https://react.dev/reference/react/Fragment
func StrictMode ¶
StrictMode lets you find common bugs in your components early during development. See: https://react.dev/reference/react/StrictMode
type Func ¶
Func is the type of function that is passed back when a function is passed as a prop to a React element. This is because of how functions are represented in GopherJS.
See: https://github.com/gopherjs/gopherjs/blob/master/js/js.go
func UseCallback ¶
UseCallback memoizes a callback function so it maintains stable identity across renders unless dependencies change.
If nil is given for the dependencies, the function is recreated for every render. If an empty `[]any{}` is given for the dependencies, the function is only created once for the initial render. Setters, Funcs, and Refs should be stablized so should normally not need to be used as dependencies. The number and order of dependencies must remain consistent.
func UseState ¶
func UseState[T any](initial T) (T, Func)
UseState creates a state for the current component render. Returns the current state value and a setter function to update the state. The setter accepts any value, which will be the new state at the next render, or a function that takes the current state and returns the new state.
Warning: The types are externalized into JS and back into Go types when going through React, meaning some types will not be able to be recovered the same as when passed in. Therefore these should typeically use bool, int, float64, string, or *js.Objects. See https://github.com/gopherjs/gopherjs/blob/master/js/js.go
It must be called unconditionally at the top level of the component function. See: https://react.dev/reference/react/useState
func UseStateLazy ¶
func UseStateLazy[T any](initialFn func() T) (T, Func)
UseStateLazy is the same as UseState but the initial value is computed by calling the given function only once during the initial render.
Use this to avoid expensive computations on every render for the initial state value that will always be thrown away after the first render.
Warning: The types are externalized into JS and back into Go types when going through React, meaning some types will not be able to be recovered the same as when passed in. Therefore these should typeically use bool, int, float64, string, or *js.Objects. See https://github.com/gopherjs/gopherjs/blob/master/js/js.go
type Node ¶
type Node any
Node is a React node that can be displayed. This will usually be a react element constructed with CreateElement(), a string, a number, null, or undefined. Node may be a slice of Nodes as well.
type Props ¶
Props represents the properties (props) passed to a React element,
The props may carry any value or function that is needed by the component to render itself and to callback to the parent. See: https://react.dev/reference/react/createElement
type Ref ¶
Ref is a React ref created with UseRef(). This is intended to hold a reference to a DOM element or a *js.Object. It is a mutable object with a `current` property that can hold any value. Modifying the `current` property does not trigger re-renders.
See: https://react.dev/reference/react/useRef
func UseRef ¶
func UseRef() Ref
UseRef creates a mutable ref object that persists for the lifetime of the component. The ref object has a `current` property that can hold any JS object, such as references to components.
func (Ref) SetCurrent ¶
type Root ¶
Root is a React root created with CreateRoot(). It is used to render React nodes into the DOM. See: https://react.dev/reference/react-dom/client/createRoot
func CreateRoot ¶
type ValueRef ¶
ValueRef is a React ref created with UseRefWith() that contains a value. It is a mutable object with a `current` property that can hold any value. Modifying the `current` property does not trigger re-renders.
See: https://react.dev/reference/react/useRef
func UseRefLazy ¶
UseRefLazy is similar to UseRef except initializes the `current` property to an initial value. Since the value is being given this will use a ValueRef to hold the value instead of a general Ref.
The given initial function will usually only be called once when initializing (or twice when in strict mode).
func UseRefWith ¶
UseRefWith is similar to UseRef except initializes the `current` property to the given initial value. Since the value is being given this will use a ValueRef to hold the value instead of a Ref.
UseRefWith will store any value type including Go values types without allowing them to be internalized and externalized.
To avoid recreating the initial value over and over again, for complex values use UseRefLazy.
See https://react.dev/reference/react/useRef#avoiding-recreating-the-ref-contents
func (ValueRef[T]) SetCurrent ¶
func (ref ValueRef[T]) SetCurrent(v T)
Source Files