Research
Security News
Quasar RAT Disguised as an npm Package for Detecting Vulnerabilities in Ethereum Smart Contracts
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
@microsoft/mgt-react
Advanced tools
Use mgt-react
to simplify usage of Microsoft Graph Toolkit (mgt) web components in React. The library wraps all mgt components and exports them as React components.
npm install @microsoft/mgt-react
or
yarn add @microsoft/mgt-react
All components are available via the npm package and are named using PascalCase. To use a component, first import it at the top:
import { Person } from '@microsoft/mgt-react';
You can now use Person
anywhere in your JSX as a regular React component.
<Person personQuery="me" />
All properties and events map exactly as they are defined in the component documentation - see web component docs.
For example, you can set the personDetails
property to an object:
const App = (props) => {
const personDetails = {
displayName: 'Bill Gates',
};
return <Person personDetails={personDetails}></Person>;
};
Or, register an event handler:
import { PeoplePicker, People } from '@microsoft/mgt-react';
const App = (props) => {
const [people, setPeople] = useState([]);
const handleSelectionChanged = (e) => {
setPeople(e.target.selectedPeople);
};
return
<div>
<PeoplePicker selectionChanged={handleSelectionChanged} />
Selected People: <People people={people} />
</div>;
};
Most Microsoft Graph Toolkit components support templating and mgt-react
allows you to leverage React for writing templates.
For example, to create a template to be used for rendering events in the mgt-agenda
component, first define a component to be used for rendering an event:
import { MgtTemplateProps } from '@microsoft/mgt-react';
const MyEvent = (props: MgtTemplateProps) => {
const { event } = props.dataContext;
return <div>{event.subject}</div>;
};
Then use it as a child of the wrapped component and set the template prop to event
import { Agenda } from '@microsoft/mgt-react';
const App = (props) => {
return <Agenda>
<MyEvent template="event">
</Agenda>
}
The template
prop allows you to specify which template to overwrite. In this case, the MyEvent
component will be repeated for every event, and the event
object will be passed as part of the dataContext
prop.
mgt-react
exposes some custom hooks that you can use in your app:
useIsSignedIn
You can use this hook to check the signed in state:
import { Agenda, useIsSignedIn } from '@microsoft/mgt-react';
const App = (props) => {
const [isSignedIn] = useIsSignedIn();
return {isSignedIn && <Agenda></Agenda>}
}
If you've used web components in React, you know that proper interop between web components and React components requires a bit of extra work.
From https://custom-elements-everywhere.com/:
React passes all data to Custom Elements in the form of HTML attributes. For primitive data this is fine, but the system breaks down when passing rich data, like objects or arrays. In these instances you end up with stringified values like some-attr="[object Object]" which can't actually be used.
Because React implements its own synthetic event system, it cannot listen for DOM events coming from Custom Elements without the use of a workaround. Developers will need to reference their Custom Elements using a ref and manually attach event listeners with addEventListener. This makes working with Custom Elements cumbersome.
FAQs
Microsoft Graph Toolkit React wrapper class
The npm package @microsoft/mgt-react receives a total of 11,201 weekly downloads. As such, @microsoft/mgt-react popularity was classified as popular.
We found that @microsoft/mgt-react demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
Security News
Research
A supply chain attack on Rspack's npm packages injected cryptomining malware, potentially impacting thousands of developers.
Research
Security News
Socket researchers discovered a malware campaign on npm delivering the Skuld infostealer via typosquatted packages, exposing sensitive data.