#
@modernbanc/react

@modernbanc/react is a very thin wrapper on top of @modernbanc/js that allows you to create, mount, and update your inputs/outputs(elements) by simply declaring them as typical React Components and passing props.

#
Requirements

A workspace setup with Modernbanc.
A valid API key with a role that has appropriate secret permissions (create/get/update/delete/reveal).

#
Installation

npm install @modernbanc/react

Local development issue with Nextjs and Create React App

You may have issues where the SDK doesn't make API calls to our server while developing locally on the dev server due to browser security around iFrames. As a workaround, you can test locally by:

Building your app using npm run build
Running the built app using:
- serve -s build for Create React App
- next start for Nextjs

#
Initialization

First, wrap the relevant part of your app with ModernbancProvider. This will instantiate the @modernbanc/js client and make it accessible to all children components via context.

const App = () => (
  <ModernbancProvider api_key="YOUR_API_KEY">
    <View />
  </ModernbancProvider>
);

#
Usage:

Add Modernbanc components alongside yours and use secret functions via context.

Unlike plain @modernbanc/js that you have to add to a container div, these React components automatically create and manage a container div - you can customize via container prop.

import { InputElement, OutputElement, useModernbancContext } from '@modernbanc/react'
import { CSSProperties, useState } from 'react';
 
const View = () => {
  const context = useModernbancContext();
  const [input_is_ready, setInputReady] = useState(false);
  const secret_id = 'SECRET_MAR24_Vfi1gUoYhiex5LbesVj'; // Update with your secret id.
 
  /*  This function will collect data from the input in an isolated way and send them to Modernbanc Vault
   *  You will then have secrets that you can later use in your application.
   */
  async function collect() {
    const response = await context.modernbanc.getElement('input', 'card_number')?.createSecret();
    if (!response || response?.is_error) {
      console.log('Backend error: ', response);
      return;
    }
    const secret_id = response.secret_id; // Use the secret id as you want.
  }
 
  /* 
   * This function fetches the secret's value from Modernbanc Vault and reveals it in the output element
   */
  async function show() {
    await context.modernbanc.getElement('output', 'number_output')?.showSecretValue();
    // Component has now revealed the secret value in your app.
  }
 
  return (
    <div style={container_styles}>
      {!input_is_ready && 'Loading elements...'}
      <h3>Input</h3>
      <label>Card number</label>
      <InputElement
        id="card_number"
        placeholder="Enter card number"
        container={{ style: { height: '28px' } }}
        css={'border: 1px solid gray;color: black;'}
        replacers={[{ type: 'card_number' }]}
        matchers={[{ type: 'valid_card_number' }]}
        onReady={() => {
          setInputReady(true);
        }}
      />
      <button onClick={collect}>Collect card data</button>
      <br />
      {secret_id ? (
        <>
          <h3>Output</h3>
          <label>Card number</label>
          <OutputElement
            css={'border: 1px solid gray;color: black;'}
            id="number_output"
            container={{ style: { height: '28px' } }}
            secret_id={secret_id}
          />
          <button onClick={show}>Show card data</button>
        </>
      ) : (
        'Secret id not available'
      )}
    </div>
  );
};
 
export default View;
 
const container_styles: CSSProperties = {
  width: '50%',
  textAlign: 'center',
  margin: '20px auto',
  display: 'flex',
  flexDirection: 'column',
  gap: '20px',
};

#
Events:

You can subscribe to all events mentioned in @modernbanc/js except that we made them similar to native handlers.

E.g to subscribe to focus event:

<InputElement
  id="card_number"
  onFocus={() => {
    console.log('Input was focused.')
  }}
/>

#
Focus and Blur Input element:

You can use InputElementRef to focus or blur the input element programmatically.

import { InputElementRef, InputElement } from '@modernbanc/react';
import { useRef } from 'react';
 
const View = () => {
  const input_ref = useRef<InputElementRef>(null);
 
return (
  <div>
    <InputElement
      id="card_number"
      ref={input_ref}
    />
    <button onClick={() => input_ref.current?.focus()}>Focus</button>
    <button onClick={() => input_ref.current?.blur()}>Blur</button>
  </div>
  );
};
 
export default View;

#@modernbanc/react

#Requirements

#Installation

#Initialization

#Usage:

#Events: