diff --git a/docs/source/developer/virtualdom.rst b/docs/source/developer/virtualdom.rst index df743c462814..6f0230d1fdfe 100644 --- a/docs/source/developer/virtualdom.rst +++ b/docs/source/developer/virtualdom.rst @@ -34,8 +34,13 @@ override the ``render`` method to return a React element: We use Phosphor `Signals `__ to represent data that changes over time in JupyterLab. -To have your React element change in response to a signal event, use the ``UseSignal`` component, -which implements the `"render props" `__. +To have your React element change in response to a signal event, use the ``UseSignal`` component from ``@jupyterlab/apputils``, +which implements the `"render props" `__: + + +.. literalinclude:: virtualdom.usesignal.tsx + :force: + The `running component `__ and the ``createSearchOverlay`` function in the `search overlay `__ diff --git a/docs/source/developer/virtualdom.usesignal.tsx b/docs/source/developer/virtualdom.usesignal.tsx new file mode 100644 index 000000000000..f0138e1c838c --- /dev/null +++ b/docs/source/developer/virtualdom.usesignal.tsx @@ -0,0 +1,25 @@ +import * as React from 'react'; + +import { ReactWidget, UseSignal } from '@jupyterlab/apputils'; + +import { ISignal, Signal } from '@phosphor/signaling'; + +import { Widget } from '@phosphor/widgets'; + +function MyComponent() { + return
My Widget
; +} + +function UseSignalComponent(props: { signal: ISignal }) { + return {() => }; +} + +class MyWidget extends ReactWidget { + render() { + return ; + } + + private _signal = new Signal(this); +} + +const myWidget: Widget = new MyWidget();