@ahamove/react NPM

@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

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`

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