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