PnP React Hooks

PnP React Hooks is a wrapper library for PnPjs, provides configurable React hooks for SharePoint API to speed up development for simple SPFx webparts and components.

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

npm install pnp-react-hooks @pnp/sp react

@pnp/sp and react packages are peer dependencies.

Features

• Build simple web parts quickly with less code.
• TypeScript support.
• Automatically tracks parameter changes and refreshes data as needed.
• Easy to tree-shake unused code with modern JS bundlers.
• Can be configured for multiple sites with an option provider.
• Supports PnPjs 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.