TypeScript icon, indicating that this package has built-in type declarations

7.0.1 • Public • Published

Local Logic Elements React (Alpha)

⚠️ This package is in active development and is not production-ready.

Local Logic Elements React provides a set of modular, composable UI components built on top of the Local Logic API.

Getting started


First, install with yarn, pnpm, or npm:

yarn add @local-logic/elements-react
pnpm add @local-logic/elements-react
npm i --save @local-logic/elements-react

Be sure to install all peer dependencies.

The script is also available in UMD and EMS format from the Local Logic CDN: https://sdk.locallogic.co/elements-react///index.min.js

Note: Using the CDN approach in production is discouraged. The CDN requires the client download the entire elements library, regardless of which elements are used.


You can now import LocalLogicProvider:

import { LocalLogicProvider } from "@local-logic/elements-react";

const App = () => {
  return (

ℹ️ Your apiKey should be provided to you by a Local Logic team member.

Within the context of your LocalLogicProvider, you can now add Elements.

import { Scores } from "@local-logic/elements-react";

const MyComponent = () => {
  return (
        lat: 43.642567,
        lng: -79.387054,
        geographyLevels: ["10", "30"]



LocalLogicProvider component provides request caching, and accepts configuration options. It can be placed anywhere, but should wrap all Local Logic Elements.


Name Required Type Default Description
apiKey true string Auth apiKey required for making requests to the Local Logic API.
options.appearance false AppearanceAPI The appearance option provides theme and variable support customizing the look and feel of Local Logic Elements.
options.locale false "en" | "fr" "en" The locale option specifies the language of the scores and the UI interface.


The useLocalLogic hook provides access to the client and appearance objects.




Name Type Description
client Methods Can be used to make requests to the Local Logic API.
appearance AppearanceAPI["appearance"] Contains Local Logic theme and variable values.


The Scores component provide a UI visualization of Local Logic scores and associated points of interest.


Name Required Type Default Description
options.lat false number A decimal number between -90 and 90 (Latitude).
options.lng false number A decimal number between -180 and 180 (Longitude).
options.geographyIds false string[] A comma separated list of geography ids, ex. g30_dpz89rm7 or g30_dpz89rm7, g10_dpz89rm7. If this parameter is provided, the lat and lng parameters are optional.
options.geographyLevels false ("10" | "20" | "30")[] A list of geography levels to include, ex. 10,30. If no geography levels are provided, no geography scores will be returned.
options.locationScoresRounding false boolean .5 The type of rounding to apply to the scores returned under data.location. Either .5 (default) to round at the nearest 0.5, or none, to disable rounding.
options.include false ("high_schools" | ... | "daycares")[] All scores An array containing ScoreNames to return, ex. ["car_friendly", "pedestrian_friendly"]. If no names are provided, all scores will be returned.
onChange false ({ type, data }) => void The onChange callback is triggered when the component state changes.

TypeScript Support

Local Logic Elements React comes packaged with TypeScript declarations.




npm i @local-logic/elements-react

DownloadsWeekly Downloads






Unpacked Size

1.39 MB

Total Files


Last publish


  • cmburcus
  • katialira
  • nicholashaley
  • mailletf