#
@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

If you’re using Next.js, ensure to add "use client"; at the top of your component files where you’re using @modernbanc/react.
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: