Add useTracker (react-meteor-data 2.0.0 or later) (#41318)

This commit is contained in:
Per Bergland 2020-01-01 00:18:49 +01:00 committed by Ryan Cavanaugh
parent f0470ebc13
commit 98feb5a0f0
2 changed files with 21 additions and 6 deletions

View File

@ -1,5 +1,11 @@
import * as React from 'react';
export function withTracker<TDataProps, TOwnProps>(
options: (props: TOwnProps) => TDataProps | {getMeteorData: (props: TOwnProps) => TDataProps, pure?: boolean}
options: (props: TOwnProps) => TDataProps | { getMeteorData: (props: TOwnProps) => TDataProps; pure?: boolean },
): (reactComponent: React.ComponentType<TOwnProps & TDataProps>) => React.ComponentClass<TOwnProps>;
/**
* Hooks (React 16.8 or later) version of tracker.
* Requires react-meteor-data 2.0.0 or later
*/
export function useTracker<TDataProps>(getMeteorData: () => TDataProps, deps?: React.DependencyList): TDataProps;

View File

@ -1,5 +1,5 @@
import * as React from 'react';
import { withTracker } from 'meteor/react-meteor-data';
import { withTracker, useTracker } from 'meteor/react-meteor-data';
interface DemoComponentContainerProps {
status: string;
@ -10,9 +10,7 @@ interface DemoComponentData {
result: string;
}
const DemoComponent: React.SFC<DemoComponentContainerProps & DemoComponentData> = (props) => (
<div>{props.data}</div>
);
const DemoComponent: React.SFC<DemoComponentContainerProps & DemoComponentData> = props => <div>{props.data}</div>;
const DemoComponentContainer: React.ComponentClass<DemoComponentContainerProps> = withTracker<
DemoComponentData,
@ -22,6 +20,17 @@ const DemoComponentContainer: React.ComponentClass<DemoComponentContainerProps>
result: 'success',
}))(DemoComponent);
const HooksDemoComponentContainer = (props: DemoComponentContainerProps) => {
const trackedProps = useTracker(() => ({
data: 'some data',
result: 'success',
}));
return <DemoComponent {...props} {...trackedProps} />;
};
const RootComponent = () => (
<DemoComponentContainer status="ok" />
<>
<DemoComponentContainer status="ok" />
<HooksDemoComponentContainer status="ok" />
</>
);