FDC3 React Hooks
React hook helpers for the FDC3 DesktopAgent API. See also the FDC3 npm package.
Usage
Take a look at the example app for some more detailed example usage. You can see the examples deployed here.
useCurrentChannel
import { Channel } from '@finos/fdc3';
import { useCurrentChannel } from '@whitedog/fdc3-react';
const MyComponent: React.FunctionComponent = () => {
const [channel]: Channel = useCurrentChannel();
return (
<dl>
<dt>Current Channel</dt>
<dd>{channel?.id}</dd>
</dl>
);
};
useSystemChannels
import { Channel } from '@finos/fdc3';
import { useSystemChannels } from '@whitedog/fdc3-react';
const MyComponent: React.FunctionComponent = () => {
const [channels]: Channel[] = useSystemChannels();
return (
<ul>
{channels?.map(c => (
<li key={c.id}>{c.id}</li>
))}
</ul>
);
};
useAddContextListener
import { broadcast, Contact, Context, ContextTypes } from '@finos/fdc3';
import { useAddContextListener } from '@whitedog/fdc3-react';
const MyComponent: React.FunctionComponent = () => {
const anyContext: Context = useAddContextListener();
const contactContext: Contact = useAddContextListener(
ContextTypes.Contact
) as Contact;
return (
<>
<textarea defaultValue={JSON.stringify(anyContext, null, 2)}></textarea>
<textarea defaultValue={JSON.stringify(contactContext, null, 2)}></textarea>
<button
onClick={() =>
broadcast({
type: ContextTypes.Instrument,
id: { ticker: 'GBPUSD' },
})
}
>
Broadcast Instrument Context
</button>
<button
onClick={() =>
broadcast({
type: ContextTypes.Contact,
id: { email: 'test@example.com' },
})
}
>
Broadcast Contact Context
</button>
</>
);
};
useAddIntentListener
import {
Contact,
Context,
ContextTypes,
Intents,
raiseIntent,
} from '@finos/fdc3';
import { useAddContextListener } from '@whitedog/fdc3-react';
const MyComponent: React.FunctionComponent = () => {
const viewChartIntentContext: Context = useAddIntentListener(
Intents.ViewChart
);
return (
<>
<textarea defaultValue={JSON.stringify(viewChartIntentContext, null, 2)}></textarea>
<button
onClick={() =>
raiseIntent(Intents.ViewChart, {
type: ContextTypes.Instrument,
id: { ticker: 'GBPUSD' },
})
}
>
Raise ViewChart Intent
</button>
</>
);
};