useBlockstack

API

This package exports two different objects, a React Component and a React Hook.

The Blockstack component is intended to provide context to the hook, and allow it to read the current session and update whatever component needs updating.

The useBlockstack hook enables you to use simple and common Blockstack functions to run in your app.

<Blockstack>

This component should be placed at the root of your app or close to it

This component provides the necessary context to every useBlockstack hook your app uses. It must be placed over any component that calls useBlockstack.

It has no props besides its children and needs no configuration.

Example:

function Login() {
	const [, { login } ] = useBlockstack();

	return <Button onClick={login}>Login</Button>
}

function App() {
	return (
		<Blockstack>
			<Login/>
		</Blockstack>
	);
}

useBlockstack

tl;dr

function Container() {
	const [ session, { putFile, getFile, login, logout } ] = useBlockstack();

	if(!session) {
		return <Login/>;
	}

	return <span onClick={logout}> Welcome {session.username} </span>;
}

More info on the returned params:

| Param | Type | Description | |:-----:|:----:|:-----------:| | session | UserData | null if user is signed out, else UserData. | | putFile(name, data) | function | Allows to write a file to Gaia storage via Blockstack | | getFile(name) | function | Allows to read a file from Gaia storage via Blockstack | | login | function | Redirects the user to login | | logout | function | Logs the current user out |

login

login redirects the current user to the Blockstack login page. After redirection the hook removes the search string from the current URL.

This may be revised in future versions, allowing for custom search returns

If using multiple useBlockstack hooks it is possible that every hook will change context, thus rendering multiple times. Will be revised.