toc

React.js SDK

A full reference of our React.js SDK.

The Evervault React.js SDK is a toolkit for encrypting data in the browser.

You can use our React.js SDK to encrypt data — rather than with Relay — and still send it to a third-party via Relay. Encrypting with our frontend SDKs is best for developers who want to avoid the network latency of Relay and/or want to avoid sending plaintext data to an Evervault endpoint.

You don’t need to change your database configuration. You can store Evervault-encrypted data in your database as you would the plaintext version.

Installation

Our React.js SDK is distributed via npm, and can be installed using your preferred package manager.

bash
npm install @evervault/react

Initialization

Once installed, initialize the React.js SDK with your team's unique ID found in the Settings. Use an EvervaultProvider component as a provider for your app.

javascript
import { EvervaultProvider } from '@evervault/react';
export const App = () => {
return (
<EvervaultProvider teamId={'<YOUR_TEAM_ID>'}>
<ChildComponent />
</EvervaultProvider>
);
};

Reference

The Evervault React.js SDK exposes one function: evervault.encrypt()

evervault.encrypt()

evervault.encrypt() encrypts data for use in your Cages. To encrypt data on the client, simply pass an object or string into the evervault.encrypt() function. Store the encrypted data in your database as normal.

javascript
async evervault.encrypt(data: Object | String);
ParameterTypeDescription
dataObject or StringData to be encrypted

Any time you want to encrypt data, simply import useEvervault in your component:

jsx
import React, { useState } from 'react';
import { useEvervault } from '@evervault/react'
export const MyComponent = () => {
const evervault = useEvervault();
const [ssn, setSsn] = useState(undefined);
const handleSubmit = async () => {
// Here we are encrypting a Social Security Number
const encrypted = await evervault.encrypt({ ssn });
await hitYourBackend(encrypted);
};
return (
<form onsubmit={handleSubmit}>
{/* Sensitive field inputs */}
<input onChange={updateSsn} value={ssn} id="ssn" />
</form>
);
}