Skip to main content

​
Installation

Get started with Adopta Un Abuelo React Components by installing the package and its peer dependencies.

​
Package Installation

The library is available as an npm package. Install it using your preferred package manager: 
npm install @adoptaunabuelo/react-components react react-dom styled-components
The library requires React 18+ or React 19+ and styled-components 5+ or 6+ as peer dependencies.

​
Peer Dependencies

These dependencies are required for the library to function:
PackageVersionPurpose
react^18.0.0 || ^19.0.0React framework
react-dom^18.0.0 || ^19.0.0React DOM rendering
styled-components^5.0.0 || ^6.0.0CSS-in-JS styling

​
Optional Dependencies

Some components require additional dependencies. Install only what you need for the components you plan to use:

​
Google Maps (InputLocation)

For the InputLocation component with autocomplete functionality: 
npm install @react-google-maps/api
You must also add the Google Maps JavaScript API script to your project’s HTML:
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&language=es"></script>
Replace YOUR_API_KEY with your actual Google Maps API key.

​
Stripe (Payout)

For the Payout component with payment processing: 
npm install @stripe/react-stripe-js @stripe/stripe-js

​
Rich Text Editor (TextArea)

For the TextArea component with rich text editing capabilities: 
npm install @tiptap/react @tiptap/starter-kit @tiptap/extension-text-align @tiptap/extension-text-style @tiptap/extensions

​
Loading Animations (Button)

For the Button component’s Lottie-based loading and success animations: 
npm install @lottiefiles/react-lottie-player

​
Webcam (InputImage)

For the InputImage component with webcam capture: 
npm install react-webcam

​
Styled Components Compatibility

For better styled-components compatibility (recommended): 
npm install @emotion/is-prop-valid

​
Quick Reference Table

Component(s)Required Package(s)
InputLocation@react-google-maps/api
Payout@stripe/react-stripe-js, @stripe/stripe-js
TextArea (Rich Text)@tiptap/react, @tiptap/starter-kit, @tiptap/extension-text-align, @tiptap/extension-text-style, @tiptap/extensions
Button (Loading/Success)@lottiefiles/react-lottie-player
InputImage (Webcam)react-webcam
All components@emotion/is-prop-valid (recommended)

​
Verifying Installation

After installation, verify that the library is installed correctly by importing a component: 
import { Button } from '@adoptaunabuelo/react-components';

function App() {
  return <Button>Hello World</Button>;
}
If you see no errors, you’re ready to start building!

​
Version Information

Current version: 0.3.148
Check the changelog for the latest updates and breaking changes.

​
Troubleshooting

​
Styled Components Version Conflict

If you encounter issues with styled-components, ensure you’re using version 5.x or 6.x: 
npm ls styled-components

​
React Version Compatibility

The library supports React 18 and React 19. If you’re using an older version of React, you may need to upgrade: 
npm install react@latest react-dom@latest

​
TypeScript Support

The library includes TypeScript definitions. No additional @types packages are needed.

​
Next Steps

Quick Start Guide

Learn how to use the library with practical examples

Build docs developers (and LLMs) love

Get started for freeTalk to us