Skip to main content

Overview

The Adopta Un Abuelo React Components library uses optional peer dependencies to keep the core bundle lightweight. Install only the dependencies you need based on which components you’re using.
Optional dependencies must be installed separately and are required for specific components to function. The component will not work if its dependencies are missing.

Component Dependencies

InputLocation Component

Required for location autocomplete functionality powered by Google Maps Places API. Package: @react-google-maps/api
npm install @react-google-maps/api
Additional Setup Required: See Google Maps Integration for API key configuration.

Payout Component

Required for Stripe payment method collection (cards and SEPA direct debit). Packages: @stripe/react-stripe-js and @stripe/stripe-js
npm install @stripe/react-stripe-js @stripe/stripe-js
Additional Setup Required: See Stripe Integration for publishable key configuration.

TextArea Rich Text Editor

Required for rich text editing with formatting toolbar (bold, italic, headings, alignment). Packages: Multiple Tiptap extensions
npm install @tiptap/react @tiptap/starter-kit @tiptap/extension-text-align @tiptap/extension-text-style @tiptap/extensions
Additional Setup Required: See Rich Text Editor for configuration details.

Button Loading Animations

Required for Lottie-based loading and success animations in Button components. Package: @lottiefiles/react-lottie-player
npm install @lottiefiles/react-lottie-player

InputImage Component

Required for webcam capture functionality in image inputs. Package: react-webcam
npm install react-webcam

Styled Components (Optional)

Optional utility for filtering DOM props in styled-components v6+. Package: @emotion/is-prop-valid
npm install @emotion/is-prop-valid

Dependency Matrix

Quick reference table:
Component(s)Required PackagesAdditional Setup
InputLocation@react-google-maps/apiGoogle Maps API key
Payout@stripe/react-stripe-js
@stripe/stripe-js
Stripe publishable key
TextArea (rich text)@tiptap/react
@tiptap/starter-kit
@tiptap/extension-text-align
@tiptap/extension-text-style
@tiptap/extensions
None
Button (animations)@lottiefiles/react-lottie-playerNone
InputImagereact-webcamCamera permissions

Version Compatibility

All optional dependencies are tested with the versions specified in the library’s devDependencies. Current tested versions:
  • @react-google-maps/api: ^2.20.8
  • @stripe/react-stripe-js: ^5.6.0
  • @stripe/stripe-js: ^8.7.0
  • @tiptap/react: ^3.19.0
  • @tiptap/starter-kit: ^3.19.0
  • @tiptap/extension-text-align: ^3.19.0
  • @tiptap/extension-text-style: ^3.19.0
  • @tiptap/extensions: ^3.19.0
  • @lottiefiles/react-lottie-player: ^3.6.0
  • react-webcam: ^7.2.0
The library follows semantic versioning. Patch and minor version updates of optional dependencies should be compatible, but test thoroughly when upgrading major versions.

Build docs developers (and LLMs) love