@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

packages/core/src/types.ts:7

---

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

packages/core/src/types.ts:17

---

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

packages/core/src/utils.ts:1

---

isEqual

▸ isEqual(x, y): boolean

Parameters

Name	Type
x	unknown
y	unknown

Returns

boolean

Defined in

packages/core/src/utils.ts:5