React

This document describes best practices for using StaticKit functions in React.

Installation

This library assumes that React is already installed in your environment as a peer dependency. Our helpers rely on React Hooks, so you must be on version 16.8.0 or higher.

npm install @statickit/react

Source on GitHub | npm package

Setting up context

It's best to place the <StaticKitProvider> in your top-level app or layout component. You must provide your Site ID via the site prop.

Here's an example of a custom Next.js _app.js file:

import { StaticKitProvider } from '@statickit/react';
function App({ Component, pageProps }) {
return (
<StaticKitProvider site="{your-site-id}">
<Component {...pageProps} />
</StaticKitProvider>
);
}
export default App;

This way, you can access an app-wide instance of the StaticKit client in your components:

import { useStaticKit } from '@statickit/react';
function MyComponent() {
const client = useStaticKit();
// ...
}

Building components

Suppose you want send yourself an email when someone clicks a special button.

Here's what your statickit.json config might look like:

{
"functions": {
"performMagic": { "type": "sendNotification", "to": "{your-email-address}" }
}
}

And here's what your React component could look like:

import { useStaticKit } from '@statickit/react';
import { performMagic } from '@statickit/functions';
function MagicButton() {
const client = useStaticKit();
const handleClick = () => {
performMagic(client, {
subject: 'Magic button was clicked!'
});
}
return (
<button onClick={handleClick}>Do Magic!</button>
);
}