office-contact-card
    TypeScript icon, indicating that this package has built-in type declarations

    2.2.0 • Public • Published

    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.

    Install

    npm i office-contact-card

    DownloadsWeekly Downloads

    46

    Version

    2.2.0

    License

    MIT

    Unpacked Size

    349 kB

    Total Files

    12

    Last publish

    Collaborators

    • avatar