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
- npm v7+
- npm v3-6
- pnpm
- yarn
Peer dependencies are automatically installed by npm.
npm install pnp-react-hooks
npm install pnp-react-hooks @pnp/sp react@17.0.2
pnpm install pnp-react-hooks @pnp/sp react@17.0.2
yarn add pnp-react-hooks @pnp/sp react@17.0.2
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.