# Solid React
**Solid React** is a library that simplifies building [[Solid]]-powered applications using React. It provides hooks, components, and utilities that integrate React's component model with [[Solid Protocol]] data sources.
## Purpose
- Connect React applications to [[Solid]] pods
- Authenticate users via [[Solid OIDC]]
- Read and write data using familiar React patterns (hooks, context)
- Wrap [[Inrupt Solid Client]] for a more idiomatic React API
## Key Features
- **React Hooks**: `useSession`, `useResource`, `useThing`, `useDataset`
- **Components**: Helpers for rendering Solid resources
- **Authentication**: Simplified Solid OIDC login flow integrated with React state
- **Type Safety**: TypeScript support for typed data access
- **Caching**: Local cache for fetched data
## Common Patterns
```jsx
import { useSession, LoginButton, LogoutButton } from "@inrupt/solid-ui-react";
function App() {
const { session } = useSession();
return session.info.isLoggedIn
? <LogoutButton />
: <LoginButton oidcIssuer="https://login.inrupt.com" />;
}
```
## Ecosystem
- **@inrupt/solid-ui-react**: Inrupt's official React UI library
- **swrlit**: Hooks for Linked Data using SWR
- Various community projects and starter templates
## Related Tools
- [[Inrupt Solid Client]] — underlying client library
- [[Solid.js]] — vanilla JavaScript Solid client (not to be confused with the SolidJS framework)
- [[Solid OIDC]] — authentication
## Resources
- Inrupt Solid React docs: https://docs.inrupt.com/developer-tools/javascript/solid-ui-react/
- GitHub: https://github.com/inrupt/solid-ui-react
- Solid project tools: https://solidproject.org/developers/tools
## Note
Do not confuse **Solid React** (React library for the Solid Protocol) with **SolidJS** (a reactive UI framework that's unrelated to the Solid project).
## References
- https://docs.inrupt.com/developer-tools/javascript/solid-ui-react/
## Related
- [[Solid]]
- [[Solid Protocol]]
- [[Inrupt Solid Client]]
- [[Solid.js]]
- [[Solid OIDC]]