# @tramvai/react

> --- title: '@tramvai/react' sidebar_position: 2 ---

Latest version **6.82.54** (published 2026-09-03) · Apache-2.0 license · 3.1K weekly downloads

## Install

```sh
npm install @tramvai/react
pnpm add @tramvai/react
yarn add @tramvai/react
bun add @tramvai/react
```

## Health

**Score 75/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; recently updated; high maintenance score.

## Facts

| | |
|---|---|
| Version | 6.82.54 |
| Published | 2026-09-03 |
| First published | 2021-09-02 |
| Weekly downloads | 3.1K |
| License | Apache-2.0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 4 |
| Unpacked size | 37.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 130 |
| Maintainers | super_oleg, meskill, tinkoffbank |

## Links

- npm: https://www.npmjs.com/package/@tramvai/react
- Repository: https://github.com/tramvaijs/tramvai
- Homepage: https://github.com/tramvaijs/tramvai#readme
- Issues: https://github.com/tramvaijs/tramvai/issues
- npm.io page: https://npm.io/package/@tramvai/react

## Dependencies (4)

- [@loadable/component](https://npm.io/package/@loadable/component.md) ^5.15.2
- [hoist-non-react-statics](https://npm.io/package/hoist-non-react-statics.md) ^3.3.0
- [@types/loadable__component](https://npm.io/package/@types/loadable__component.md) ^5.13.4
- [@tramvai/types-actions-state-context](https://npm.io/package/@tramvai/types-actions-state-context.md) 6.82.54

## Recent versions

- 6.82.54 (latest) — 2026-09-03
- 7.43.1 (prerelease) — 2026-09-03
- 5.53.174 (stable-v5.x.x) — 2026-08-12
- 4.41.124 (stable-v4.x.x) — 2025-09-26
- 3.41.49 (stable-v3.x.x) — 2025-01-26
- 7.41.7 — 2026-08-28
- 6.82.46 — 2026-08-28
- 7.41.3 — 2026-08-28
- 6.82.42 — 2026-08-27
- 7.41.2 — 2026-08-25
- 6.82.41 — 2026-08-25
- 7.41.1 — 2026-08-20
- 7.39.1 — 2026-08-18
- 6.82.38 — 2026-08-18
- 7.39.0 — 2026-08-17
- … 905 more at https://npm.io/package/@tramvai/react/versions

## README

---
title: '@tramvai/react'
sidebar_position: 2
---

# React

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

## Install

```bash
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

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

```tsx
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.

```javascript
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

```tsx
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

```javascript
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

```tsx
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](https://ru.reactjs.org/docs/error-boundaries.html#introducing-error-boundaries). 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:

```tsx
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](https://loadable-components.com/docs/error-boundaries/), which assumes, that you must wrap lazy components in ErrorBoundary:

```tsx
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:

```tsx
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](https://tramvai.dev/docs/guides/react-18#error-handling)!

---
_Source: https://npm.io/package/@tramvai/react · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._