M
M
Magny resources
Search…
⌃K

Using context hooks

Sometimes you may want app-specific dynamic data to be searchable within Magny. This data could be usernames, company names, project names or anything that you can export from your app, and then import to Magny.
When imported, end users can search for this data and then take actions against them. For example, users can look for a company name and view the company card, or a check for a username and edit it accordingly.
This data is passed within the browser using methods mentioned below. This is done each time Magny is initialized. Since data passed to Magny search bar may be private information, it never leaves the browser and never reported back to Magny.
useMagnyContext is a Magny hook that lets you add custom meta-data variables as a commands to display into your command bar. Usage can be seen below.
const { getMagnyContext, setMagnyContext, clearMagnyContext } = useMagnyContext();

Reference

useMagnyContext()
Call useMagnyContext at the top level of your component to export helpful functions to get, set and clear meta-data for your current Magny Widget.
import { useMagnyContext } from 'magny';
function MyComponent() {
const { getMagnyContext, setMagnyContext, clearMagnyContext } = useMagnyContext();
// ...

Parameters

useMagnyContext does not take any parameters.

Returns

useMagnyContext returns an objects with exactly three functions:
  • getMagnyContext to get stored and already in use Magny context
  • setMagnyContext to define and initialize the Magny context
  • clearMagnyContext to delete all context data

getMagnyContext function

The getMagnyContext function returned by useMagnyContext lets you return the state of current Magny context. You need to return value from getMagnyContext to get the current context.
import { useMagnyContext } from 'magny';
function MyComponent() {
const { getMagnyContext } = useMagnyContext();
const context = getMagnyContext();
// ...

Parameters

getMagnyContext does not take any parameters.

Returns

getMagnyContext returns current state of context.

setMagnyContext function

The setMagnyContext (contextName, context, commandOptions) function returned by useMagnyContext lets you set the state of current Magny Context. You need to call setMagnyContext and pass contextName, context and commandOptions parameters to set the current context. You can set multiple context by calling setMagnyContext function.
import { useMagnyContext } from 'magny';
const context= [{...},{...}];
const commandOptions= {...};
function MyComponent() {
const { setMagnyContext } = useMagnyContext();
setMagnyContext("Your Context Name", context, commandOptions);
// ...
You can call the setMagnyContext inside of the React useEffect Hook with empty dependency array to set Magny context once.

Parameters

setMagnyContext takes 3 parameters:
  • contextName sets the name of the context. It also determines category name of the commands. This name shouldn’t be identical when setting new context, otherwise the last set value is accepted.
  • context determines the main context value. Context format must be array of objects.
  • commandOptions defines how your context commands looks like.

commandOptions API reference

Name
Type
Default
Description
Example
searchableFields
Array <String>
[]
Determines the values to search on. Accepts keys in metadata as an array of strings. Also, accessible to nested fields with dot notation.
["fullName", "company.name"]
title
String
The title of the command. Accessible metadata values dynamically with double curly brackets {{...}} notation inside of the string. Also, accessible to nested fields with dot notation.
"Title is: {{fullName}}"
description
String
The description of the command. Accessible metadata values dynamically with double curly brackets {{...}} notation inside of the string. Also, accessible to nested fields with dot notation.
"{{company.name}}"
icon
String
The icon of the command. Accepts React Feather Icons as a string.
"FiUser"
iconColor
String
The color of the icons. Accepts all CSS color formats as a string.
"#FF0000"
defaultIcon
Boolean
true
The default icon of the command. If the icon parameter is not specified, icon value is determined as "FiLink" by default. To hide default icon set false.
false
image
String
The image of the command. This image replaces the icon. Accepts image links. Accessible metadata values dynamically with double curly brackets {{...}} notation inside of the string. Also, accessible to nested fields with dot notation.
"{{profilePhoto}}"
navigate
String
The navigate lets you navigate programmatically. Accepts internal paths to navigate. Accessible metadata values dynamically with double curly brackets {{...}} notation inside of the string. Also, accessible to nested fields with dot notation.
"/projects/{{project.id}}"
link
String
The link will open when the command runs. Accepts internal or external links. Accessible metadata values dynamically with double curly brackets {{...}} notation inside of the string. Also, accessible to nested fields with dot notation.
"https://magny.io/{{project.id}}"
target
String
"_self"
The target attribute specifies where to open the linked document. Accepts same values of HTML target attribute.
"_blank"
closeAfter
Boolean
false
Closes popup after running the command.
true
Note that, in order to use the navigate option, navigate function must pass as navigate prop in Magny component. Example code is shown bellow:
import { Magny } from 'magny';
import { useNavigate } from "react-router-dom";
function MyComponent() {
const navigate = useNavigate();
return (
<Magny projectId="<project-id>" navigate={navigate} />
// ...

Returns

setMagnyContext does not return any variables.

clearMagnyContext function

The clearMagnyContext function returned by useMagnyContext lets you clear the state of current Magny Context. You need to simply call the clearMagnyContext function to delete all data from current context.
import { useMagnyContext } from 'magny';
function MyComponent() {
const { clearMagnyContext } = useMagnyContext();
clearMagnyContext();
// ...

Parameters

clearMagnyContext does not take any parameters.

Returns

clearMagnyContext does not return any variables.

Example usage

You can see boilerplate code example bellow.
You don’t have to use useMagnyContext hook it where Magny is initialized. Basically, you can use whichever component you need to use it there.
import { Magny, useMagnyContext } from 'magny';
import { useEffect } from "react";
import { useNavigate } from "react-router-dom";
const context = [
{
id: 1,
about: "About me.",
firstName: "Magny",
lastName: "User 1",
fullName: "Magny User 1",
school: {
id: 1,
name: "Magny School",
}
},
// ...
];
const commandOptions = {
searchableFields: ["fullName", "school.name"],
title: "{{fullName}}",
description: "{{school.name}}",
navigate: "/schools/{{school.id}}",
icon: "FiUser",
iconColor: "blue",
closeAfter: true
};
function MyComponent() {
// Require navigate because navigate key used in commandOptions
const navigate = useNavigate();
const { setMagnyContext } = useMagnyContext();
useEffect(() => {
setMagnyContext("Magny Users", context, commandOptions);
}, []);
return(
<Magny projectId="<project-id>" navigate={navigate} />
);
}