Updated
Smart Address
NewCustomize
Duration0.50s
Stagger0.035s
Radius18px
Installation
npx shadcn@latest add https://uibrik.com/r/smart-address.jsonInstall the packages
npm install motion react-use-measureAdd the cn helper
Imports
cnfrom@/lib/utils, whichshadcn initcreates. Add it by hand without shadcn.Copy the source into your project
components/uibrik/smart-address/smart-address.tsx"use client"; import { AnimatePresence, animate, motion, useMotionValue, usePresence, useReducedMotion, type MotionStyle } from "motion/react"; import { useCallback, useEffect, useImperativeHandle, useLayoutEffect, useRef, useState, type ClipboardEvent, type InputHTMLAttributes, type KeyboardEvent, type Ref, } from "react"; import useMeasure from "react-use-measure"; import { cn } from "@/lib/utils"; import { EMPTY_ADDRESS, FIELDS, parseAddress, type Address, type AddressField, type ParsedAddress } from "./parse"; export type { Address, AddressField, ParsedAddress } from "./parse"; export { parseAddress } from "./parse"; export type SmartAddressHandle = { /** Splits `text` as if it had been pasted into the street field. */
Adds the files to
components/uibrik/smart-address and installs motion and react-use-measure. With the @uibrik namespace set up: npx shadcn@latest add @uibrik/smart-address.Usage
import { SmartAddress } from "@/components/uibrik/smart-address/smart-address";const labels = ["Street", "City", "Region", "Postcode", "Country"];<SmartAddress label="Address" placeholder="Paste a full address" labels={labels} duration={0.5} stagger={0.035} radius={18} // value={…} // onChange={(address) => {}} // defaultValue={…} // parse={(raw) => {}}/>Props
SmartAddress- label
- Type string
- "Address"
- Label of the single field before it splits.
- placeholder
- Type string
- "Paste a full address"
- Placeholder of the single field.
- labels
- Type string[]
- ["Street","City","Region","Postcode","Country"]
- Labels for street, city, region, postcode and country, in that order.
- duration
- Type number
- 0.5
- Length of the split: fields unfolding from under the street field and words landing in them.
- stagger
- Type number
- 0.035
- Delay between one field and the next, in reading order.
- radius
- Type number
- 18
- Corner radius of each field.
- value / onChange
- Type Address / (address: Address) => void
- –
- Controlled address: { street, city, region, postcode, country }.
- defaultValue
- Type Partial<Address>
- –
- Address on mount when uncontrolled. Anything past the street opens the full form.
- parse
- Type (raw: string) => ParsedAddress
- parseAddress
- Swap in your own parser. The built-in one runs offline and keeps anything it can't place in the street line.
- ref
- Type Ref<{ paste(text): void; clear(): void }>
- –
- Split an address from code, or empty the form.
- className
- Type string
- –
- Classes for the wrapper.