office-contact-card

Contact Card in MS Office style

Usage no npm install needed!

<script type="module">
  import officeContactCard from 'https://cdn.skypack.dev/office-contact-card';
</script>

README

Build Status

Office Contact Card

Contact card in Office style is a React component, which provides contact card UX with information from your Azure Active Directory.

Preview

Main functionality:

  • Avatar preview
  • Name and title resolution
  • Hover card with:
    • Contact info summary
    • Manager summary
    • Contact info details
    • Full organization hierarchy
    • People navigation history

How to Use it

Installation

npm i office-contact-card

Authentication

The component requires access to MS Graph.

Example

import { GraphServiceAuthenticator, PersonaWithCard, PersonaShowMode } from "office-contact-card";

GraphServiceAuthenticator.setAuthCallback(() => Promise.resolve("-token-") );

function renderCard() {
  return <PersonaWithCard email={"test@fabricam.com"} showMode={PersonaShowMode.NameTitle} />;
}

Contributing

This project welcomes contributions and suggestions. Most contributions require you to agree to a Contributor License Agreement (CLA) declaring that you have the right to, and actually do, grant us the rights to use your contribution. For details, visit https://cla.microsoft.com.

When you submit a pull request, a CLA-bot will automatically determine whether you need to provide a CLA and decorate the PR appropriately (e.g., label, comment). Simply follow the instructions provided by the bot. You will only need to do this once across all repos using our CLA.

This project has adopted the Microsoft Open Source Code of Conduct. For more information see the Code of Conduct FAQ or contact opencode@microsoft.com with any additional questions or comments.