CurrencyInput

CurrencyInput.jsx

import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';

const CurrencyInputWrapper = styled.div`
  position: relative;
  display: inline-block;
`;

const CurrencySymbol = styled.span`
  position: absolute;
  left: 2px; /* Adjust this value to move the symbol horizontally */
  top: 78%;
  transform: translateY(-50%);
  pointer-events: none; /* Make sure the input remains clickable */
`;

const StyledVaNumberInput = Component => {
  const WrappedComponent = ({ currency, ...props }) => {
    if (!currency) {
      return <Component {...props} />;
    }

    return (
      <CurrencyInputWrapper>
        <CurrencySymbol>$</CurrencySymbol>
        <Component {...props} />
      </CurrencyInputWrapper>
    );
  };

  // define prop types
  WrappedComponent.propTypes = {
    currency: PropTypes.bool,
  };

  WrappedComponent.displayName = `withCurrency(${Component.displayName ||
    Component.name})`;

  return WrappedComponent;
};

export default StyledVaNumberInput;


// Implementation

import withCurrency from './shared/CurrencyInput';

const CurrencyVaNumberInput = withCurrency(VaNumberInput);


<CurrencyVaNumberInput
  id={`dependentAge-${i}`}
  label={DEPENDENT_AGE_LABELS[i + 1]}
  name={`dependentAge-${i}`}
  onInput={({ target }) => updateDependents(target, i)}
  value={dependent.dependentAge}
  className="no-wrap input-size-1"
  onBlur={event => handleBlur(event, i)}
  error={errors[i]}
  currency
  required
/>