open-index/open-npm huggingface dataset:
npm package: @spritz-finance/react-secure-elements
Description: [![NPM](https://img.shields.io/npm/v/@spritz-finance/react-secure-elements.svg)](https://www.npmjs.com/package/@spritz-finance/react-secure-elements)
Latest version: 0.0.2

# @spritz-finance/react-secure-elements

[![NPM](https://img.shields.io/npm/v/@spritz-finance/react-secure-elements.svg)](https://www.npmjs.com/package/@spritz-finance/react-secure-elements)

## Introduction

Official react components for Spritz Finance.

## Install

```bash
npm install --save @spritz-finance/react-secure-elements

or

yarn add @spritz-finance/react-secure-elements
```

## Usage

```jsx
import React from 'react'
import { SpritzCard, Environment } from '@spritz-finance/react-secure-elements'

const App = () => {
    const [tokens, setTokens] = React.useState<{ apiKey: string; renderSecret: string}>(null)

    React.useEffect(() => {
        // Get the renderSecret for the SpritzCard from the api
        // Pass in the renderSecret along with the users api key
        setTokens({
            apiKey: 'ak_MzY5YWJ...',
            renderSecret: 'U2FsdGVkX18bLYGYL...'
        }
    })

    if (!tokens) return null

    return (
        <SpritzCard
            environment={Environment.Staging}
            apiKey={tokens.apiKey}
            renderSecret={tokens.renderSecret}
            onCopyText={(text) => console.log('onCopyText', text)}
            onDetailsLoaded={() => console.log('Card details loaded')}
        />
    )
}

export default App
```