Skip to main content

PnP React Hooks

PnP React Hooks is a wrapper library for PnPjs, provides configurable React hooks for SharePoint Rest API.

Example usage:

import * as React from "react";
import { useListItems, useCurrentUser } from "pnp-react-hooks";

export const ExampleComponent = () =>
{
    const currentUser = useCurrentUser();

    const items = useListItems("My List", {
        query: {
            select: ["Title", "Id", "Author/Title"],
            expand: ["Author"],
            filter: `Author eq ${currentUser?.Id}`
        },
        disabled: !currentUser
    });

    return (<ul>
        {items?.map(item => (<li key={item.Id}>{item.Title}</li>))}
    </ul>);
};

Installation​

Peer dependencies are automatically installed by npm.

npm install pnp-react-hooks

Features​

  • Build simple web parts quickly with less code.
  • Written in TypeScript, no additional type package required.
  • Automatically tracks parameter changes and refreshes data as needed.
  • Easy to treeshake unused code with modern JS bundlers.
  • Can be configured for multiple sites with an option provider.
  • Supports PnPjs V3 behaviors.

Questions and Suggestions​

If you find any issue or have a suggestion on how project can be improved feel free to create an issue on Github.