# @gumhq/react-sdk
> React SDK for Gum
Latest version **3.0.1** (published 2023-06-29) · GPL-3.0 license · 0 weekly downloads
## Install
```sh
npm install @gumhq/react-sdk
pnpm add @gumhq/react-sdk
yarn add @gumhq/react-sdk
bun add @gumhq/react-sdk
```
## Health
**Score 30/100 (F)** — status: abandoned.
Positive: has types; esm support; no vulnerabilities; high quality score.
Warnings: low downloads.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 3.0.1 |
| Published | 2023-06-29 |
| First published | 2023-02-13 |
| Weekly downloads | 0 |
| License | GPL-3.0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 13 |
| Unpacked size | 138.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 18 |
| Maintainers | shek_dev, vjgpt |
| Keywords | gum, react, sdk |
## Links
- npm: https://www.npmjs.com/package/@gumhq/react-sdk
- Repository: https://github.com/gumhq/sdk
- Homepage: https://github.com/gumhq/sdk#readme
- Issues: https://github.com/gumhq/sdk/issues
- npm.io page: https://npm.io/package/@gumhq/react-sdk
## Dependencies (13)
- [axios](https://npm.io/package/axios.md) ^1.4.0
- [crypto-js](https://npm.io/package/crypto-js.md) ^4.1.1
- [tweetnacl](https://npm.io/package/tweetnacl.md) ^1.0.3
- [@gumhq/sdk](https://npm.io/package/@gumhq/sdk.md) ^3.0.1
- [decimal.js](https://npm.io/package/decimal.js.md) ^10.4.3
- [typescript](https://npm.io/package/typescript.md) ^4.9.5
- [@orca-so/sdk](https://npm.io/package/@orca-so/sdk.md) ^1.2.25
- [@solana/web3.js](https://npm.io/package/@solana/web3.js.md) ^1.75.0
- [@shadow-drive/sdk](https://npm.io/package/@shadow-drive/sdk.md) ^3.3.0
- [@solana/spl-token](https://npm.io/package/@solana/spl-token.md) ^0.3.7
- [@project-serum/anchor](https://npm.io/package/@project-serum/anchor.md) ^0.26.0
- [@bundlr-network/client](https://npm.io/package/@bundlr-network/client.md) ^0.10.5
- [@solana/wallet-adapter-react](https://npm.io/package/@solana/wallet-adapter-react.md) ^0.15.26
## Alternatives
- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads
## Recent versions
- 3.0.1 (latest) — 2023-06-29
- 3.0.0 — 2023-06-19
- 2.1.0 — 2023-05-11
- 2.0.5 — 2023-04-24
- 2.0.4 — 2023-04-24
- 2.0.3 — 2023-04-18
- 2.0.2 — 2023-04-05
- 2.0.1 — 2023-03-29
- 2.0.0 — 2023-03-27
- 1.0.12 — 2023-03-09
- 1.0.11 — 2023-03-09
- 1.0.10 — 2023-03-09
- 1.0.9 — 2023-03-09
- 1.0.8 — 2023-03-01
- 1.0.7 — 2023-02-23
- … 5 more at https://npm.io/package/@gumhq/react-sdk/versions
## README
# Gum React SDK
## Installation
```bash
yarn add @gumhq/react-sdk
```
## Documentation
For more detailed documentation, please visit the [Gum documentation](https://docs.gum.fun/).
## Usage
The `useGumContext`, `useCreateProfile`, and `useUploaderContext` hooks provide the necessary utilities to create a new profile.
```tsx
import {
useCreateProfile,
useGumContext,
useUploaderContext,
} from "@gumhq/react-sdk";
import { useWallet } from "@solana/wallet-adapter-react";
import { useState } from "react";
export function ProfileCreation() {
const [profileName, setProfileName] = useState("");
const [profileBio, setProfileBio] = useState("");
const [profileUsername, setProfileUsername] = useState("");
const [profileAvatar, setProfileAvatar] = useState("");
const wallet = useWallet();
const { publicKey } = wallet;
const { sdk } = useGumContext(); // access the Gum SDK
const { createProfileWithDomain } = useCreateProfile(sdk); // create a new profile
const { handleUpload } = useUploaderContext(); // upload metadata to Arweave/GenesysGo
const createProfile = async (event: React.FormEvent) => {
event.preventDefault();
const profileMetadata = {
name: profileName,
bio: profileBio,
avatar: profileAvatar,
};
const uploadResponse = await handleUpload(profileMetadata, wallet);
if (!uploadResponse) {
console.error("Error uploading profile metadata");
return false;
}
const profileResponse = await createProfileWithDomain(
uploadResponse.url,
profileUsername,
publicKey
);
if (!profileResponse) {
console.error("Error creating profile");
return false;
}
console.log("Profile created successfully", profileResponse);
};
// Your HTML form and fields would go here
}
```
## Gum Quickstart
The Gum Quickstart is an excellent starting point for developers aiming to leverage Gum in their Next.js applications. This ready-to-use template not only expedites the setup process, but also includes functional examples and components to facilitate the creation of domain profiles, posts, and more. Check out the [Gum Quickstart](https://github.com/gumhq/gum-quickstart) to get started.
## Example App
Check out the [example app](https://github.com/gumhq/gum-example-app) that uses the Gum SDK to demonstrate its capabilities. The app is a simple React app that showcases the creation of a domain, profile, and posts.
## Contributing
We welcome contributions to improve the SDK. Please raise an issue or submit a pull request with any suggestions or bug fixes.
## License
The Gum SDK is licensed under the [GNU General Public License v3.0](https://github.com/gumhq/sdk/blob/master/packages/react-sdk/LICENSE).
## Support
Join our Discord community at [https://discord.gg/tCswbSK5W2](https://discord.gg/tCswbSK5W2) for any questions or support.
---
_Source: https://npm.io/package/@gumhq/react-sdk · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._