@atomic-solutions/react-wordpress

React Query hooks and provider for WordPress REST API.

Installation

pnpm add @atomic-solutions/react-wordpress

Peer Dependencies

pnpm add react @tanstack/react-query

Quick Start

import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { WordPressProvider, usePosts } from '@atomic-solutions/react-wordpress';

const queryClient = new QueryClient();

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <WordPressProvider
        config={{
          baseURL: 'https://your-site.com/wp-json',
        }}
      >
        <BlogList />
      </WordPressProvider>
    </QueryClientProvider>
  );
}

function BlogList() {
  const { data, isLoading } = usePosts({ per_page: 10 });

  if (isLoading) return <div>Loading...</div>;

  return (
    <div>
      {data?.data.map(post => (
        <article key={post.id}>
          <h2>{post.title.rendered}</h2>
          <div dangerouslySetInnerHTML={{ __html: post.excerpt.rendered }} />
        </article>
      ))}
    </div>
  );
}

Available Hooks

Posts

• usePosts(params?) - Fetch paginated posts
• useInfinitePosts(params?) - Infinite scrolling posts
• usePost(id) - Fetch single post by ID
• usePostBySlug(slug) - Fetch post by slug

Categories

• useCategories(params?) - Fetch paginated categories
• useInfiniteCategories(params?) - Infinite scrolling categories
• useCategory(id) - Fetch single category by ID

Media

• useMediaItem(id) - Fetch media item by ID

Users

• useCurrentUser() - Fetch current authenticated user
• useUser(id) - Fetch user by ID

Authentication

• useLogin() - Login mutation (JWT)
• useValidateToken() - Validate JWT token mutation

Documentation

See CLAUDE.md for complete documentation.

License

MIT