toc

React.js SDK

A full reference of our React.js SDK.

The Evervault React.js SDK is a toolkit for encrypting data on the client.

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>
);
}