3.40.28 • Published 2 days ago

@tramvai/react v3.40.28

Weekly downloads
-
License
Apache-2.0
Repository
github
Last release
2 days ago

title: '@tramvai/react'

sidebar_position: 2

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 />;
@loadable/component@types/loadable__component@tramvai/types-actions-state-contexthoist-non-react-statics
@everything-registry/sub-chunk-930@tramvai/react-query@zalastax/nolb-_tram@tramvai/cli@tramvai/child-app-core@tramvai/tokens-common@tramvai/tokens-router@tramvai/module-render@tramvai/module-router@tramvai/test-react
4.9.0

2 days ago

3.40.28

7 days ago

4.8.6

7 days ago

3.40.26

8 days ago

3.40.25

8 days ago

4.8.4

8 days ago

4.8.3

8 days ago

3.40.21

11 days ago

4.7.1

11 days ago

3.40.20

12 days ago

4.7.0

12 days ago

4.4.6

16 days ago

3.40.17

16 days ago

4.4.5

17 days ago

4.4.4

17 days ago

3.40.16

17 days ago

4.4.1

18 days ago

4.4.3

18 days ago

3.40.14

18 days ago

3.40.13

18 days ago

4.3.1

19 days ago

3.40.11

19 days ago

4.3.0

22 days ago

3.40.6

23 days ago

3.40.7

23 days ago

4.2.1

23 days ago

4.2.0

23 days ago

4.1.0

23 days ago

4.0.6

26 days ago

3.40.5

26 days ago

4.0.5

1 month ago

4.0.4

1 month ago

3.40.4

1 month ago

3.38.0

1 month ago

3.37.10

1 month ago

3.37.8

2 months ago

3.37.7

2 months ago

3.37.5

2 months ago

3.37.1

2 months ago

3.34.0

3 months ago

3.33.2

3 months ago

3.33.0

3 months ago

3.32.3

3 months ago

3.31.0

3 months ago

3.31.2

3 months ago

3.31.3

3 months ago

3.30.1

3 months ago

3.27.5

3 months ago

3.27.3

3 months ago

3.27.4

3 months ago

3.27.0

4 months ago

3.26.3

4 months ago

3.26.2

4 months ago

3.25.5

4 months ago

3.25.6

4 months ago

3.25.3

4 months ago

3.25.2

4 months ago

3.24.3

4 months ago

3.25.0

4 months ago

3.24.1

4 months ago

3.24.0

4 months ago

3.23.0

5 months ago

3.21.0

5 months ago

3.19.0

5 months ago

3.19.1

5 months ago

3.17.0

5 months ago

2.160.25

5 months ago

3.15.1

5 months ago

3.16.0

5 months ago

3.12.0

5 months ago

3.14.1

5 months ago

3.14.0

5 months ago

3.13.0

5 months ago

3.10.2

5 months ago

3.11.0

5 months ago

2.139.3

8 months ago

2.139.2

8 months ago

3.2.0

6 months ago

2.149.0

8 months ago

2.149.1

7 months ago

2.160.21

5 months ago

2.160.12

6 months ago

2.160.17

6 months ago

2.160.19

6 months ago

2.160.10

6 months ago

2.118.1

10 months ago

3.0.2

6 months ago

3.0.0

6 months ago

2.130.10

9 months ago

2.117.4

10 months ago

2.130.11

9 months ago

2.117.2

10 months ago

2.117.0

10 months ago

2.150.0

7 months ago

2.150.1

7 months ago

2.160.4

6 months ago

2.160.2

6 months ago

2.160.1

7 months ago

2.119.5

10 months ago

2.119.4

10 months ago

2.119.3

10 months ago

2.119.2

10 months ago

2.119.0

10 months ago

3.5.0

6 months ago

3.4.1

6 months ago

2.152.2

7 months ago

2.152.3

7 months ago

2.152.1

7 months ago

3.4.6

6 months ago

3.4.5

6 months ago

3.3.2

6 months ago

2.151.0

7 months ago

2.142.1

8 months ago

2.142.0

8 months ago

2.154.0

7 months ago

2.141.2

8 months ago

2.141.1

8 months ago

2.130.9

9 months ago

2.130.7

9 months ago

2.130.6

9 months ago

2.153.3

7 months ago

2.130.4

9 months ago

2.153.1

7 months ago

2.153.2

7 months ago

2.153.0

7 months ago

2.121.2

10 months ago

3.9.1

5 months ago

3.9.0

5 months ago

2.133.5

8 months ago

2.133.4

8 months ago

3.10.0

5 months ago

2.133.2

8 months ago

2.156.1

7 months ago

2.133.0

9 months ago

2.143.0

8 months ago

2.143.1

8 months ago

2.120.0

10 months ago

3.7.0

6 months ago

2.132.1

9 months ago

2.155.0

7 months ago

2.132.0

9 months ago

2.123.4

9 months ago

2.146.1

8 months ago

2.123.3

9 months ago

2.123.2

9 months ago

2.123.1

9 months ago

2.146.0

8 months ago

2.145.0

8 months ago

2.145.1

8 months ago

2.122.0

9 months ago

2.134.0

8 months ago

2.125.4

9 months ago

2.148.1

8 months ago

2.125.3

9 months ago

2.125.2

9 months ago

2.148.0

8 months ago

2.125.0

9 months ago

2.137.0

8 months ago

2.147.1

8 months ago

2.124.0

9 months ago

2.159.5

7 months ago

2.159.6

7 months ago

2.159.4

7 months ago

2.159.1

7 months ago

2.159.2

7 months ago

2.112.0

11 months ago

2.111.1

11 months ago

2.111.0

11 months ago

2.95.0

1 year ago

2.95.4

12 months ago

2.103.1

12 months ago

2.94.27

1 year ago

2.94.24

1 year ago

2.94.23

1 year ago

2.94.25

1 year ago

2.104.0

12 months ago

2.104.2

12 months ago

2.104.3

12 months ago

2.104.4

12 months ago

2.106.3

11 months ago

2.106.4

11 months ago

2.106.5

11 months ago

2.105.0

12 months ago

2.110.0

11 months ago

2.106.2

11 months ago

2.108.1

11 months ago

2.109.0

11 months ago

2.109.1

11 months ago

2.98.2

12 months ago

2.98.0

12 months ago

2.100.0

12 months ago

2.108.0

11 months ago

2.97.2

12 months ago

2.97.0

12 months ago

2.101.0

12 months ago

2.101.1

12 months ago

2.102.1

12 months ago

2.94.17

1 year ago

2.94.16

1 year ago

2.94.2

1 year ago

2.94.19

1 year ago

2.94.18

1 year ago

2.94.13

1 year ago

2.94.12

1 year ago

2.94.6

1 year ago

2.94.15

1 year ago

2.94.4

1 year ago

2.94.9

1 year ago

2.94.7

1 year ago

2.94.8

1 year ago

2.94.0

1 year ago

2.79.9

1 year ago

2.79.7

1 year ago

2.79.6

1 year ago

2.79.5

1 year ago

2.79.4

1 year ago

2.82.0

1 year ago

2.93.0

1 year ago

2.78.2

1 year ago

2.78.1

1 year ago

2.89.2

1 year ago

2.92.1

1 year ago

2.77.0

1 year ago

2.92.0

1 year ago

2.76.2

1 year ago

2.91.1

1 year ago

2.87.0

1 year ago

2.90.0

1 year ago

2.85.1

1 year ago

2.84.0

1 year ago

2.84.2

1 year ago

2.75.0

1 year ago

2.74.0

1 year ago

2.73.1

1 year ago

2.73.0

1 year ago

2.72.0

1 year ago

2.72.5

1 year ago

2.72.4

1 year ago

2.72.3

1 year ago

2.67.1

1 year ago

2.70.1

1 year ago

2.70.0

1 year ago

2.67.0

1 year ago

2.66.0

1 year ago

2.66.2

1 year ago

2.66.3

1 year ago

2.65.9

1 year ago

2.56.0

1 year ago

2.56.5

1 year ago

2.56.1

1 year ago

2.56.2

1 year ago

2.64.0

1 year ago

2.49.5

1 year ago

2.49.2

1 year ago

2.49.3

1 year ago

2.49.0

1 year ago

2.63.0

1 year ago

2.48.3

1 year ago

2.48.0

1 year ago

2.51.2

1 year ago

2.51.0

1 year ago

2.51.1

1 year ago

2.59.2

1 year ago

2.59.3

1 year ago

2.59.4

1 year ago

2.59.0

1 year ago

2.50.0

1 year ago

2.61.1

1 year ago

2.61.2

1 year ago

2.34.0

2 years ago

2.45.0

1 year ago

2.45.1

1 year ago

2.33.1

2 years ago

2.33.3

2 years ago

2.33.2

2 years ago

2.44.2

1 year ago

2.32.0

2 years ago

2.31.0

2 years ago

2.39.0

1 year ago

2.39.3

1 year ago

2.39.2

1 year ago

2.37.3

2 years ago

2.37.1

2 years ago

2.37.0

2 years ago

2.40.0

1 year ago

2.36.0

2 years ago

2.47.3

1 year ago

2.47.0

1 year ago

2.47.2

1 year ago

2.47.1

1 year ago

2.35.0

2 years ago

2.22.0

2 years ago

2.21.0

2 years ago

2.21.1

2 years ago

2.29.0

2 years ago

2.20.0

2 years ago

2.20.1

2 years ago

2.28.0

2 years ago

2.27.0

2 years ago

2.26.2

2 years ago

2.26.0

2 years ago

2.25.1

2 years ago

2.24.1

2 years ago

2.24.0

2 years ago

2.24.3

2 years ago

2.11.0

2 years ago

2.4.0

2 years ago

2.3.0

2 years ago

2.10.2

2 years ago

2.2.3

2 years ago

2.2.2

2 years ago

2.0.2

2 years ago

2.0.7

2 years ago

2.0.0

2 years ago

2.7.0

2 years ago

2.7.1

2 years ago

1.110.2

2 years ago

1.110.0

2 years ago

2.6.2

2 years ago

1.109.0

2 years ago

2.5.0

2 years ago

1.108.1

2 years ago

1.94.5

2 years ago

1.94.2

2 years ago

1.94.1

2 years ago

1.94.0

2 years ago

1.103.0

2 years ago

1.102.1

2 years ago

1.96.0

2 years ago

1.105.3

2 years ago

1.105.2

2 years ago

1.95.2

2 years ago

1.95.1

2 years ago

1.95.0

2 years ago

1.104.2

2 years ago

1.105.6

2 years ago

1.98.0

2 years ago

1.99.1

2 years ago

1.97.0

2 years ago

1.106.0

2 years ago

1.101.8

2 years ago

1.101.6

2 years ago

1.101.3

2 years ago

1.101.4

2 years ago

1.101.2

2 years ago

1.101.9

2 years ago

1.90.6

2 years ago

1.90.4

2 years ago

1.90.2

2 years ago

1.90.1

2 years ago

1.93.1

2 years ago

1.92.3

2 years ago

1.92.2

2 years ago

1.92.0

2 years ago

1.84.0

2 years ago

1.84.2

2 years ago

1.89.1

2 years ago

1.91.1

2 years ago

1.91.0

2 years ago

1.85.0

2 years ago

1.82.1

2 years ago

1.82.2

2 years ago

1.82.3

2 years ago

1.79.0

2 years ago

1.76.2

2 years ago

1.78.0

2 years ago

1.78.1

2 years ago

1.78.2

2 years ago

1.78.3

2 years ago

1.81.0

2 years ago

1.77.0

2 years ago

1.74.0

2 years ago

1.75.0

2 years ago

1.75.1

2 years ago

1.72.1

2 years ago

1.72.2

2 years ago

1.76.0

2 years ago

1.76.1

2 years ago

1.73.0

2 years ago

1.56.0

2 years ago

1.63.1

2 years ago

1.67.0

2 years ago

1.48.3

2 years ago

1.70.0

2 years ago

1.70.2

2 years ago

1.51.0

2 years ago

1.55.0

2 years ago

1.53.4

2 years ago

1.53.6

2 years ago

1.57.1

2 years ago

1.53.5

2 years ago

1.60.2

2 years ago

1.60.1

2 years ago

1.64.0

2 years ago

1.68.0

2 years ago

1.68.1

2 years ago

1.49.1

2 years ago

1.49.0

2 years ago

1.71.0

2 years ago

1.71.1

2 years ago

1.52.0

2 years ago

1.58.1

2 years ago

1.58.0

2 years ago

1.61.0

2 years ago

1.65.0

2 years ago

1.65.1

2 years ago

1.53.2

2 years ago

1.53.1

2 years ago

1.55.2

2 years ago

1.55.1

2 years ago

1.59.0

2 years ago

1.55.4

2 years ago

1.55.3

2 years ago

1.55.5

2 years ago

1.62.0

2 years ago

1.62.1

2 years ago

1.66.0

2 years ago

1.66.1

2 years ago

1.50.1

2 years ago

1.50.0

2 years ago

1.50.3

2 years ago

1.50.2

2 years ago

1.54.0

2 years ago

1.50.4

2 years ago

1.37.1

2 years ago

1.44.4

2 years ago

1.48.2

2 years ago

1.48.1

2 years ago

1.44.5

2 years ago

1.29.1

2 years ago

1.29.4

2 years ago

1.29.2

2 years ago

1.29.3

2 years ago

1.32.1

2 years ago

1.34.0

2 years ago

1.38.0

2 years ago

1.41.0

2 years ago

1.41.2

2 years ago

1.45.0

2 years ago

1.26.1

2 years ago

1.46.11

2 years ago

1.46.10

2 years ago

1.35.1

2 years ago

1.39.1

2 years ago

1.35.6

2 years ago

1.39.0

2 years ago

1.35.4

2 years ago

1.35.8

2 years ago

1.46.6

2 years ago

1.35.10

2 years ago

1.27.0

2 years ago

1.46.5

2 years ago

1.46.8

2 years ago

1.46.7

2 years ago

1.46.9

2 years ago

1.30.2

2 years ago

1.30.0

2 years ago

1.30.1

2 years ago

1.36.0

2 years ago

1.47.0

2 years ago

1.28.2

2 years ago

1.28.0

2 years ago

1.28.4

2 years ago

1.31.1

2 years ago

1.31.0

2 years ago

1.25.4

3 years ago

1.25.0

3 years ago

1.25.1

3 years ago

1.23.0

3 years ago

1.22.2

3 years ago

1.14.1

3 years ago

1.14.0

3 years ago

1.10.3

3 years ago

1.12.0

3 years ago

1.10.2

3 years ago

1.11.0

3 years ago

1.15.0

3 years ago

1.13.1

3 years ago

1.13.0

3 years ago

1.11.1

3 years ago

1.15.2

3 years ago

1.15.1

3 years ago

1.9.11

3 years ago

1.10.0

3 years ago

1.9.10

3 years ago

1.9.9

3 years ago

1.9.8

3 years ago

1.9.7

3 years ago

1.9.6

3 years ago

1.9.1

3 years ago

1.9.5

3 years ago

1.9.4

3 years ago

1.9.3

3 years ago

1.9.2

3 years ago

1.9.0

3 years ago

1.8.8

3 years ago

1.8.7

3 years ago

1.8.6

3 years ago

1.8.5

3 years ago

1.8.4

3 years ago

1.8.2

3 years ago

1.8.1

3 years ago

1.8.0

3 years ago

1.7.8

3 years ago

1.7.7

3 years ago

1.8.3

3 years ago

1.7.3

3 years ago

1.7.6

3 years ago

1.7.5

3 years ago

1.7.4

3 years ago

1.7.1

3 years ago

1.7.0

3 years ago

1.6.0

3 years ago

1.5.0

3 years ago

1.4.0

3 years ago

1.2.4

3 years ago

1.2.3

3 years ago

1.3.0

3 years ago

1.2.0

3 years ago

1.2.2

3 years ago

1.2.1

3 years ago

1.1.2

3 years ago

1.1.1

3 years ago

1.1.0

3 years ago

1.0.10

3 years ago

1.0.9

3 years ago

1.0.8

3 years ago

1.0.7

3 years ago

1.0.6

3 years ago

1.0.0

3 years ago