@ahamove/react

Overview

The @ahamove/react library provides a set of React components designed to help developers integrate Ahamove's services into our applications easily. This library includes various UI components such as AddressAutocomplete and a ThemeProvider to ensure a consistent and customizable design, built upon the Mantine component library.

Installation

To install @ahamove/react, you can use npm or yarn:

npm install @ahamove/react

or

yarn add @ahamove/react

Usage

Here is an example of how to use the @ahamove/react library in a React application.

import "./App.css";
import "@ahamove/react/style.css";

import { useState } from "react";
import { AddressAutocomplete } from '@ahamove/react/address-autocomplete';
import { ThemeProvider, ahamoveTheme } from '@ahamove/react/theme';

function App() {
  const [address, setAddress] = useState<Address | null>({
    address:
      "AhaMove, Đường Thành Thái, Phường 12 (Quận 10), Quận 10, Hồ Chí Minh, Việt Nam",
    lat: 10.769445,
    lng: 106.663756,
  });
  const customTheme = {
    ...ahamoveTheme,
    breakpoints: {
      ...ahamoveTheme?.breakpoints,
      tablet: "768px",
    },
  };

  return (
    <div
      style={{
        width: "400px",
      }}
    >
      <ThemeProvider theme={customTheme}>
        <AddressAutocomplete
          inputProps={{}}
          lang="en"
          address={address}
          apiURL="__API_URL__"
          apiKey="__API_KEY__"
          onChange={setAddress}
        />
      </ThemeProvider>
      <pre
        style={{
          whiteSpace: "pre-wrap",
          textAlign: "left",
          border: "1px solid rgb(206, 212, 218)",
          borderRadius: "4px",
          fontSize: "14px",
          lineHeight: "1.5",
          padding: "10px",
          minHeight: "100px",
        }}
      >
        <code>{JSON.stringify(address, null, 2)}</code>
      </pre>
    </div>
  );
}

export default App;

Components

AddressAutocomplete

AddressAutocomplete is a component that provides an autocomplete input for addresses, integrating with Ahamove's API. It is built on top of Mantine's components to ensure a smooth and modern user experience.

Prop	Type	Description
inputProps	Object	Object containing additional props for the input element.
lang	String	Language for the autocomplete suggestions.
address	Object	The initial address object with address, lat, and lng.
apiURL	String	The URL for the AhaMove API.
apiKey	String	The API key for authenticating requests.
onChange	Function	Callback function that is triggered when the address changes.

ThemeProvider

ThemeProvider is a component that provides theming capabilities for the library's components. It leverages Mantine's theming system to allow extensive customization. You need to wrap your components with the ThemeProvider.

Prop	Type	Description
theme	Object	The default theme object for the components based on Ahamove's design system. It's applied by default if no custom theme is provided.

Customization

You can customize the styles of the components by providing your own theme object to the ThemeProvider, utilizing Mantine's theming capabilities.

const customTheme = {
  ...ahamoveTheme,
  breakpoints: {
    ...ahamoveTheme?.breakpoints,
    tablet: "768px",
  },
};

<ThemeProvider theme={customTheme}>{/* Your components */}</ThemeProvider>;

API Key

To use the AddressAutocomplete component, you will need an API key (__API_KEY__) and URL (__API_URL__). You can obtain this key from the Ahamove developer portal.

License

This library is licensed under the MIT License.

Support

For any questions or support, please contact our support team.