@atvise/webmi-react

React bindings for webmi

Installation

create-atvise-app (recommended)

Run npx create-atvise-app my-app to create a new react app with webmi all set up.

Manual installation

These are the steps required to add webmi bindings to your existing react project:

• First install this package and atvise-scripts with npm:

  npm install --save-dev @atvise/webmi-react atvise-scripts

• Setup atvise-scripts with npx atvise-scripts init

Usage

@atvise/webmi-react exports hooks that can be used in functional React components:

import { useSubscription } from '@atvise/webmi-react';

/**
 * @example
 * <MyLabel address="AGENT.OBJECTS.test" />
 */
function MyLabel(props) {
  const { loading, data, error } = useSubscription(props.address);

  if (loading) return <i>loading...</i>;
  if (error) return <i>An error ocurred</i>;

  return <p>AGENT.OBJECTS.test currently is: {data.value}</p>;
}

Available hooks

useCall

A hook to call a webMI method script.

Parameters

• name string The method script to call.
• options UseCallOptions<A, R, D> The options to use. (optional, default {})
  • options.defaults
  • options.onCompleted (optional, default noop)
  • options.onError (optional, default noop)

Returns [UseCallCallback<A, R, D>, UseCallState<R>]

useSubscription

A hook that returns the live value of a variable.

Parameters

• address string The variable's address.

useValue

A hook that returns a variable's value.

Parameters

• address string The variable's node id.

Upcoming hooks

• [ ] useClientVariables() - Returns logged in user, selected language, ...
• [ ] useFilterSubscription() - Subscription hook with filters (using webMI.data.subscribeFilters)
• [ ] useAlarms - A hook that returns alarms, so it can be used for an alarm list / table

This package is part of the create-atvise-app project.

Refer to it's documentation for more information.