React Renderer

Documentos > App Builder > Componentes > React Renderer

Esta página aún no está disponible en español. Estamos trabajando en su traducción.
Si tienes alguna pregunta o comentario sobre nuestro actual proyecto de traducción, no dudes en ponerte en contacto con nosotros.

The React renderer enables users to create fully custom UI components using the language and libraries they already know. This component gives builders access to React APIs so they can create flexible, dynamic, and visually impactful apps in App Builder.

This page provides an example of how to use the React renderer component. For a full reference to all of the fields in the React renderer, see Components.

Example component definition

const App = (props) => {
  // Local component state
  const [localState, setLocalState] = React.useState(0);
  
  // Access shared state from props
  const { count = 0 } = props.state;
  
  const incrementShared = () => {
  // Update shared state that persists outside component
        
props.setComponentState({...props.state, count: count + 1});
};
  
  return (
    <div>
      <h3>Shared Count: {count}</h3>
      <button onClick={incrementShared}>Increment Shared</button>
    </div>
);
}
return App;

Example component input props

${{
  queryData: query0.outputs,
  name: global?.user?.name,
  state: self.state,
}}

Example initial component state

${{
  count: 0,
  items: [],
  isLoading: false,
  selectedId: null,
}}

React Renderer

Example component definition

Example component input props

Example initial component state

Further reading