Layout

@uteamjs JSX Component extending the behaviour of standard React.Component. Both Hook and Class components are supported.

Hook Component

const layout = ({ _, Field, Section, ... call, api }) => <>
       <h4>Hello World (use hook)</h4>
       <Field id='name' />
       Your name is: {_.fields.name.value}
   </>

layout: React.Component

A special JSX Component that extends the standard React.Component by injecting special properties described below.

_: object

A special object storing all variables in the same reducer connected to the layout component.

<Element>: React.Element

Element such as Field, Section, Grid… etc defined by @uteamjs/react

call: function

Function to trigger the dispatch of actions in reducer. Refer to call() for details.

api: function

Function makes asynchronous call to the backend API, then triggers the dispatch of the actions in reducer similar to call(). Refer to api() for details.

Class Component

class layout extends utform {
   render = () => {
       const { Field, props: {_} } = this

       return (<>
           <h4>Hello World</h4>
           <Field id='name' labelPosition='top' />
           Your name is: {_.fields.name.value}
       </>)
   }
}

Unlike the Hook component, the layout Class component must extend the utform class from @uteam/react. The properties { _, call, api } are injected under this.props object, where form elements { Field, Section, Grid ... } are injected under this object.