Skip to main content

@tramvai/react

@tramvai/react - library for integrating tramvai features with React components

Install​

npm i --save @tramvai/react

DI​

When creating components, you may need to get data from di, for this there is a hook useDi and HoC withDi

useDi​

type useDi = (deps: Record<string, string | Token>) => Record<string, any>;
type useDi = (dep: string | Token) => any;

A hook into which we can pass both an object with the required dependencies and an object with data will be returned to us, as well as a single token, where the result will be returned to us. When we call useDi, we get data from di and if we don't find data in di, an error will occur.

import React from 'react';
import { useDi } from '@tramvai/react';

const MyComponent = () => {
  const { logger } = useDi({ logger: 'logger' }); // pass the object
  const Region = useDi(regionToken); // pass a single token

  logger.info('text');

  return (
    <div>
      Component
      <Region />
    </div>
  );
};

withDi​

type withDi = (
  deps: Record<string, string | Token>
) => (wrapper: React.ReactElement<any>) => React.ReactElement<any>;

A HoC that allows you to wrap any components, get data from DI and pass the result with dependencies to the props of the component

import React from 'react';
import { withDi } from '@tramvai/react';

@withDi({ logger: LOGGER_TOKEN })
class BoxyPage extends Component {
  render() {
    this.props.logger.info('text');
    return <div>Component</div>;
  }
}

useDiContainer​

type useDiContainer = () => DI.Container;

Getting an instance of a DI container that has been added to the application context.

It is better not to use this hook, as it is very low-level and is intended for developing new hooks

Error​

To handle errors during rendering, React uses Error Boundary. This package provides its own version of Error Boundary which will log an error through a generic logger and display a stub for the wrapped component if an error occurs.

ErrorBoundary​

Error Boundary component that monitors errors down the tree and, in case of a render error, will log an error and display the fallbackComponent component (passed as a props, by default it is a FallbackError from this package) instead of the fallen render subtree.

You can override the fallbackComponent through the ERROR_BOUNDARY_FALLBACK_COMPONENT_TOKEN provider.

FallbackError​

Component used by default as a stub for a subtree in which a render error occurred

withError​

Hook wrapping component in ErrorBoundary.

lazy​

To dynamically import components with SSR support, there is a high order lazy component:

import { lazy } from '@tramvai/react';

const LazyComponent = lazy(() => import('./components/foo'), {
  loading: <div>Loading...</div>,
});

<LazyComponent />;

Handling chunk loading errors​

We suggest to use @loadable approach, which assumes, that you must wrap lazy components in ErrorBoundary:

import { lazy, UniversalErrorBoundary } from '@tramvai/react';

const Component = lazy(() => import('./Component'));

const ComponentWrapper = () => {
  return (
    // feel free to use your own implementation
    <UniversalErrorBoundary error={null} fallback={() => null}>
      <Component />
    </UniversalErrorBoundary>
  );
};

Using Suspense with lazy components​

If you are using React 18, you can display fallback UI for lazy component while it is loading. To do so, you need to pass suspense: true to lazy method options:

import { Suspense } from 'react';
import { lazy } from '@tramvai/react';

const Component = lazy(() => import('./Component'), { suspense: true });

const ComponentWrapper = () => {
  return (
    <Suspense fallback={<h4>Loading...</h4>}>
      <Component />
    </Suspense>
  );
};

See more in our React 18 guide!