@react-sigma/core
Main React Sigma module that contains all the standard components & hooks to display a graph in react.
Interfaces
- ControlsContainerProps
- FullScreenControlProps
- SearchControlProps
- SigmaContainerProps
- SigmaContextInterface
- ZoomControlProps
Component
ControlsContainer
▸ ControlsContainer(props
, context?
): ReactNode
The ControlsContainer
is just a wrapper for other control components.
It defines their position and also their style with its CSS class react-sigma-controls
.
<SigmaContainer>
<ControlsContainer position={"bottom-right"}>
<ForceAtlasControl autoRunFor={2000} />
</ControlsContainer>
</SigmaContainer>
See [[ControlsContainerProps]] for more information.
Parameters
Name | Type |
---|---|
props | ControlsContainerProps |
context? | any |
Returns
ReactNode
Defined in
packages/core/src/components/controls/ControlsContainer.tsx:44
FullScreenControl
▸ FullScreenControl(props
, context?
): ReactNode
The FullScreenControl
create a UI button that allows the user to display the graph in fullscreen
<SigmaContainer>
<ControlsContainer>
<FullScreenControl />
</ControlsContainer>
</SigmaContainer>
See [[FullScreenControlProps]] for more information.
Parameters
Name | Type |
---|---|
props | FullScreenControlProps |
context? | any |
Returns
ReactNode
Defined in
packages/core/src/components/controls/FullScreenControl.tsx:67
SearchControl
▸ SearchControl(props
, context?
): ReactNode
The SearchControl
create an input text where user can search a node in the graph by its label.
There is an autocomplete based on includes & lower case.
When a node is found, the graph will focus on the highlighted node
<SigmaContainer>
<ControlsContainer>
<SearchControl />
</ControlsContainer>
</SigmaContainer>
See [[SearchControlProps]] for more information.
Parameters
Name | Type |
---|---|
props | SearchControlProps |
context? | any |
Returns
ReactNode
Defined in
packages/core/src/components/controls/SearchControl.tsx:53
ZoomControl
▸ ZoomControl(props
, context?
): ReactNode
The ZoomControl
create three UI buttons that allows the user to
- zoom in
- zoom out
- reset zoom (ie. see the whole graph)
<SigmaContainer>
<ControlsContainer>
<ZoomControl />
</ControlsContainer>
</SigmaContainer>
See [[ZoomControlProps]] for more information.
Parameters
Name | Type |
---|---|
props | ZoomControlProps |
context? | any |
Returns
ReactNode
Defined in
packages/core/src/components/controls/ZoomControl.tsx:67
Hook
useCamera
▸ useCamera(options?
): Object
React hook that helps you to manage the camera.
const {zoomIn, zoomOut, reset, goto, gotoNode } = useCamera();
Parameters
Name | Type |
---|---|
options? | CameraOptions |
Returns
Object
Name | Type |
---|---|
goto | (state : Partial <CameraState >, options? : Partial <AnimateOptions >) => void |
gotoNode | (nodeKey : string , options? : Partial <AnimateOptions >) => void |
reset | (options? : Partial <AnimateOptions >) => void |
zoomIn | (options? : CameraOptions ) => void |
zoomOut | (options? : CameraOptions ) => void |
Defined in
packages/core/src/hooks/useCamera.ts:19
useFullScreen
▸ useFullScreen(container?
): Object
React hook that helps you to set graph in fullmode.
const {toggle, isFullScreen} = useFullscreen();
Parameters
Name | Type |
---|---|
container? | null | HTMLElement |
Returns
Object
Name | Type |
---|---|
isFullScreen | boolean |
toggle | () => void |
Defined in
packages/core/src/hooks/useFullScreen.ts:22
useLoadGraph
▸ useLoadGraph<N
, E
, G
>(): (graph
: Graph
<N
, E
, G
>, clear?
: boolean
) => void
React hook that helps you to load a graph.
If a graph was previously loaded in Sigma/Graphology, per default it is cleared.
You can change this behaviour by settings the parameter clear
to false.
const loadGraph = useLoadGraph();
...
useEffect(() => {
loadGraph(erdosRenyi(UndirectedGraph, { order: 100, probability: 0.2 }), true);
}, []);
Type parameters
Name | Type |
---|---|
N | extends Attributes = Attributes |
E | extends Attributes = Attributes |
G | extends Attributes = Attributes |
Returns
fn
▸ (graph
, clear?
): void
Parameters
Name | Type |
---|---|
graph | Graph <N , E , G > |
clear? | boolean |
Returns
void
Defined in
packages/core/src/hooks/useLoadGraph.ts:21
useRegisterEvents
▸ useRegisterEvents<N
, E
, G
>(): (eventHandlers
: Partial
<EventHandlers
>) => void
React hook that helps you to listen Sigma’s events. It handles for you all the lifecyle of listener (ie. on / remove)
const registerEvents = useRegisterEvents();
const [setHoveredNode,setHoveredNode] = useState<string|null>(null);
...
useEffect(() => {
registerEvents({
enterNode: event => setHoveredNode(event.node),
leaveNode: event => setHoveredNode(null),
});
}, []);
Type parameters
Name | Type |
---|---|
N | extends Attributes = Attributes |
E | extends Attributes = Attributes |
G | extends Attributes = Attributes |
Returns
fn
▸ (eventHandlers
): void
Parameters
Name | Type |
---|---|
eventHandlers | Partial <EventHandlers > |
Returns
void
Defined in
packages/core/src/hooks/useRegisterEvents.ts:65
useSetSettings
▸ useSetSettings<N
, E
, G
>(): (newSettings
: Partial
<Settings
<N
, E
, G
>>) => void
React hook that helps you to update Sigma’s settings.
const setSettings = useSetSettings();
...
useEffect(() => {
setSettings({
hideEdgesOnMove: true,
hideLabelsOnMove: true,
});
}, []);
Type parameters
Name | Type |
---|---|
N | extends Attributes = Attributes |
E | extends Attributes = Attributes |
G | extends Attributes = Attributes |
Returns
fn
▸ (newSettings
): void
Parameters
Name | Type |
---|---|
newSettings | Partial <Settings <N , E , G >> |
Returns
void
Defined in
packages/core/src/hooks/useSetSettings.ts:22
useSigma
▸ useSigma<N
, E
, G
>(): Sigma
<N
, E
, G
>
React hook to retrieve the sigma instance (from the context).
const sigma = useSigma();
Type parameters
Name | Type |
---|---|
N | extends Attributes = Attributes |
E | extends Attributes = Attributes |
G | extends Attributes = Attributes |
Returns
Sigma
<N
, E
, G
>
Defined in
packages/core/src/hooks/useSigma.ts:14
useSigmaContext
▸ useSigmaContext<N
, E
, G
>(): SigmaContextInterface
<N
, E
, G
>
React hook that store the sigma and html container reference.
const {sigma, container} = useSigmaContext();
See [[SigmaContextInterface]] for more information.
Type parameters
Name | Type |
---|---|
N | extends Attributes = Attributes |
E | extends Attributes = Attributes |
G | extends Attributes = Attributes |
Returns
SigmaContextInterface
<N
, E
, G
>
Defined in
packages/core/src/hooks/context.ts:34
Other
EventHandlers
Ƭ EventHandlers: SigmaEvents
& TouchCaptorEvents
& MouseCaptorEvents
& CameraEvents
Sigma's events
Defined in
GraphType
Ƭ GraphType<N
, E
, G
>: AbstractGraph
<N
, E
, G
> | GraphConstructor
<N
, E
, G
>
Type parameters
Name | Type |
---|---|
N | extends Attributes = Attributes |
E | extends Attributes = Attributes |
G | extends Attributes = Attributes |
Defined in
SigmaContainer
▸ SigmaContainer<N
, E
, G
>(props
): ReactElement
<any
, string
| JSXElementConstructor
<any
>>
Type parameters
Name | Type |
---|---|
N | extends Attributes = Attributes |
E | extends Attributes = Attributes |
G | extends Attributes = Attributes |
Parameters
Name | Type |
---|---|
props | SigmaContainerProps <N , E , G > & { children? : ReactNode } & RefAttributes <null | default <N , E , G >> |
Returns
ReactElement
<any
, string
| JSXElementConstructor
<any
>>
Defined in
packages/core/src/components/SigmaContainer.tsx:141
getUniqueKey
▸ getUniqueKey(): string
Returns
string
Defined in
isEqual
▸ isEqual(x
, y
): boolean
Parameters
Name | Type |
---|---|
x | unknown |
y | unknown |
Returns
boolean