Skip to content

Commit 06b4ad0

Browse files
docs: improve README developer experience (#105)
* docs: overhaul main README for developer experience - Rewrite tagline to be clear and jargon-free - Add "Why Framework-kit?" value proposition section - Add install instructions - Fix incorrect function name (createSolanaClient → createClient) - Add context and comments to quickstart code - Simplify package descriptions - Add Next.js example and 'use client' note - Add "Learn more" section with documentation links Fixes #99, #100, #101, #102, #103 * chore: add changeset for README improvements --------- Co-authored-by: guibibeau <[email protected]>
1 parent d149054 commit 06b4ad0

File tree

2 files changed

+43
-6
lines changed

2 files changed

+43
-6
lines changed
Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
"@solana/client": patch
3+
"@solana/react-hooks": patch
4+
---
5+
6+
Improve main README documentation with clearer quickstart guide and better developer experience

README.md

Lines changed: 37 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -23,28 +23,50 @@
2323
</p>
2424

2525
<p align="center">
26-
Framework for Solana dApps: evolving multi-framework client core (React-first today) that orchestrates wallets, transactions, and reactive freshness-aware data flows out of the box.
26+
React hooks for Solana. Connect wallets, fetch balances, and send transactions with minimal setup.
2727
</p>
2828

29+
## Why Framework-kit?
30+
31+
Building Solana dApps usually means wiring together RPC connections, wallet adapters, and state management yourself. Framework-kit handles this for you:
32+
33+
- **One provider, many hooks** — Wrap your app once with `SolanaProvider`, then use hooks anywhere
34+
- **Wallet connection built-in**`useWalletConnection` handles discovery, connection, and disconnection
35+
- **Automatic data refresh** — Balances and account data stay in sync without manual refetching
36+
- **Common operations simplified**`useSolTransfer`, `useSplToken`, and `useTransactionPool` for transfers and custom transactions
37+
- **TypeScript-first** — Full type inference out of the box
38+
2939
## Packages
3040

31-
- [`@solana/client`](packages/client/README.md)headless Solana client with transaction helpers, moniker-based endpoint helpers, and wallet orchestration.
32-
- [`@solana/react-hooks`](packages/react-hooks/README.md) – React bindings, providers, and UI helpers powered by the client.
41+
- [`@solana/client`](packages/client/README.md)Core library for wallet connection, transactions, and RPC. Works with any framework or standalone.
42+
- [`@solana/react-hooks`](packages/react-hooks/README.md) – React hooks and provider. Wrap your app once, then use hooks like `useBalance` and `useSolTransfer`.
3343

34-
## Example
35-
- [`@solana/example-vite-react`](examples/vite-react/README.md) – Vite/Tailwind demo showcasing the hooks in action.
44+
## Examples
45+
- [`@solana/example-vite-react`](examples/vite-react/README.md) – Vite + Tailwind demo
46+
- [`@solana/example-nextjs`](examples/nextjs/README.md) – Next.js (App Router) demo
47+
48+
## Install
49+
50+
```bash
51+
npm install @solana/client @solana/react-hooks
52+
```
3653

3754
## React quick start
3855

56+
Add this to your main App file (e.g., `App.tsx`). You'll need a Solana wallet extension like [Phantom](https://phantom.app/) installed in your browser.
57+
3958
```tsx
40-
import { createClient } from "@solana/client";
59+
import { autoDiscover, createClient } from "@solana/client";
4160
import { SolanaProvider, useWalletConnection } from "@solana/react-hooks";
4261

62+
// Create a client pointing to Solana devnet
4363
const client = createClient({
4464
endpoint: "https://api.devnet.solana.com",
65+
walletConnectors: autoDiscover(), // Finds installed wallet extensions
4566
});
4667

4768
function WalletButtons() {
69+
// This hook gives you everything you need for wallet connection
4870
const { connectors, connect, connecting } = useWalletConnection();
4971
return (
5072
<>
@@ -69,3 +91,12 @@ export function App() {
6991
);
7092
}
7193
```
94+
95+
Run your app and you should see buttons for each detected wallet. Click one to connect.
96+
97+
> **Next.js note:** Components using these hooks must be marked with `'use client'` at the top of the file.
98+
99+
## Learn more
100+
101+
- [Full hooks documentation](packages/react-hooks/README.md) — all available hooks and options
102+
- [Client API](packages/client/README.md) — use the client without React

0 commit comments

Comments
 (0)