@imerss/inat-components

The inat-components repo contains some pre-built React components to display iNaturalist data on your own sites. The original goal was to add an interactive page to the BC Lepidoptera website so visitors could see some high-level information about lepidoptera (butterflies and moths) spotted in British Columbia. But the code was written to allow it to be re-used by any website and for any taxon or place.

This package holds the React components, with their typings, and dist/standalone.min.js, a single script holding the components and React together, for sites which don't use React.

npm install @imerss/inat-components

import TaxonPanel from "@imerss/inat-components";

<TaxonPanel
    taxon={{ id: 47157, str: "leps" }}
    place={{ id: 7085, str: "bc" }}
    dataSource="url"
    dataSourceBaseUrl="https://example.org/inat"
    features={[{ feature: "recentObservations" }, { feature: "commonTaxa" }, { feature: "favourites" }, { feature: "stats" }]}
/>

See the main documentation for every setting, the individual components, the data files which @imerss/inat-components-utils writes for the "url" data source, and the standalone version.