@yext/react-components

react-components

A library of React Components for rendering data of complex types in the Yext platform. See @yext/types for type declarations.

Directory

Currently providing the following react components, with plans for more to come in 1.0.0 release.

Component	Type	Demo
Image	Image	Storybook
Address	Address	Storybook
Hours	Hours	Storybook
HoursTable	Hours	Storybook
Map	Coordinate	Storybook

Getting Started

npm install @yext/react-components

Once the library is installed, our React Components should be available throughout your application.

import {
  Address as AddressType,
  Hours as HoursType,
  Image as ImageType,
  Coordinate,
} from "@yext/types";
import { Address, Hours, Image, Map } from "@yext/react-components";

interface LocationProps = {
  address: AddressType;
  hours: HoursType;
  c_storefront: ImageType;
  locationCoordinate: Coordinate;
}

const Location = (props: LocationProps) => {
  return (
    <>
      <Address address={props.address} />
      <Hours hours={props.hours} />
      <Image image={props.c_storefront} />
      <Map markerLocations={[props.locationCoordinate]} />
    </>
  );
}

export default Location;