Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

@impler/react

implerhq3.9kMIT1.0.0TypeScript support: included

React library to show CSV Excel Importer in react applications

impler, implerhq, data-import, excel-import, csv-import

readme

Embed Data Import into your Product


Explore the docs » · Join Discord · Report Bug

⭐️ Why

The ability to import data is often needed in the application. It usually starts the same, reading .csv or .xlsx file and insert records into the database. But after a while, you'll find yourself looping over large files, validating rows, and providing support for file types that you've never heard of them before.

Impler's goal is to help developers create an efficient and smooth data import experience between the product and its users. All with an easy-to-use API and outstanding developer experience.

✨ Features

  • 🌈 Mapping Support between specified Schema and Fields in File
  • 💅 Validation Support
  • 🚀 Webhook support to send uploaded data
  • 🛡 Simple and powerful Authentication
  • 📦 Easy to set up and integrate
  • 🛡 Written in TypeScript

📦 Install

npm install @impler/react
yarn add @impler/react

🔨 Usage

Add Script

You copy this snippet to your code before the in head tag.

<script type="text/javascript" src="https://embed.impler.io/embed.umd.min.js" async></script>

Add Import Button


Copy
import { useImpler } from '@impler/react';

const { showWidget, isImplerInitiated } = useImpler({
  projectId: "",
  templateId: "",
  accessToken: "",
});

<button disabled={!isImplerInitiated} onClick={showWidget}>
  Import
</button>