ANC-UI for React

✨ Features

• ANC UI designed for web application.
• Native component to React

🖥 Environment Support

• Modern browsers
• Server-side Rendering

| Edge | Firefox | Chrome | Safari | | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Edge | last 2 versions | last 2 versions | last 2 versions |

📦 Install

npm install @anc-delivers/ui

yarn add @anc-delivers/ui

pnpm add @anc-delivers/ui

🔨 Usage

import { CapacityWidget, AncProvider } from "@anc-delivers/ui";
import "@anc-delivers/ui/dist/index.css"

export default () => (
  <AncProvider>
    <CapacityWidget
        variant='slider'
        client={{ apiKey: "apikey" }}
        suburb={{ suburb: "melbourne", postcode: "3000" }}
        limit={6}
        ...props
        />
  </AncProvider>
);

Get selected delivery date everywhere within project with useAncContext

import { useAncContext } from "@anc-delivers/ui";

const ancContext = useAncContext();
const deliveryDate = ancContext.deliveryDate; // get delivery date through context api

🏭 Components and Properties

<CapacityWidget />

| Property | Type | Required | Default Value | Description | | ------------------- | ------ | -------- | ---------------------------- | ----- | | variant | string | ✅ | | 'slider','radio' | | apiKey | string | ✅ | | Provided by ANC Delivers | | suburb | string | ✅ | | 'melbourne' | | postcode | string | ✅ | | '3000' | | limit | number | ⭕ | 6 | | | primaryColor | string | ⭕ | '#a855f7' | | | primaryHoverColor | string | ⭕ | '#d8b4fe' | | | spinnerColor | string | ⭕ | '#a855f7' | | | fontSize | string | ⭕ | '0.875rem' | | | fontColor | string | ⭕ | '#475569' | | | fontWeight | string | ⭕ | '400' | | | fontStyle | string | ⭕ | 'Arial, Helvetica, sans-serif;' | | | fontDisabledColor | string | ⭕ | '#9ca3af' | | | headerFontColor | string | ⭕ | '#f3e8ff' | | | borderColor | string | ⭕ | '#a855f7' | | | backgroundColor | string | ⭕ | '#fff' | | | buttonColor | string | ⭕ | '#f5f5f5' | | | buttonHoverColor | string | ⭕ | '#f3e8ff' | | | buttonDisabledColor | string | ⭕ | '#e5e7eb' | | | buttonActiveColor | string | ⭕ | '#d8b4fe' | | | buttonSelectedColor | string | ⭕ | '#d8b4fe' | | | radioWidth | string | ⭕ | '160px' | | | sliderWidth | string | ⭕ | '316px' | | | sliderButtonWidth | string | ⭕ | '100px' | | | sliderButtonHeight | string | ⭕ | '36px' | | | chevronSize | number | ⭕ | 108 | | | transformLength | number | ⭕ | 15 | |

🔗 Links

• Web component