odk-player

0.1.6 • Public • Published

ODK Player

A React library to render ODK forms powered by Enketo Express 🔥⚡

ODK (Open Data Kit) is a free and open-source set of tools that help organizations author, field, and manage mobile data collection solutions. Enketo Express is a form engine that enables offline-capable, web-based form filling experiences. ODK Player is a React library that seamlessly integrates Enketo Express with React applications, allowing for easy rendering of ODK forms.

This library simplifies the process of incorporating ODK forms into React projects, providing a smooth and intuitive experience for both developers and users.

Prerequisites:

Before using ODK Player, ensure the following prerequisites are met:

  1. Deployed Enketo Express Instance: You need to have a deployed instance of Enketo Express where your ODK forms are hosted.
  2. Deployed OpenRosa-Compliant Server: ODK forms are typically served through an OpenRosa-compliant server. Ensure that you have a server, for example, Centro, properly deployed and configured.

How to Use:

To use ODK Player in your React application, follow these steps:

/* Sample Code snippet to incorporate ODK player */
// Import ODKPlayer and initializeODKPlayer from 'odk-player'
import ODKPlayer, { initializeODKPlayer } from 'odk-player';
import { useEffect } from 'react';

function App() {

  const onChange = (data) => {
    console.log("OnChange being executed on data: ", data)
  }

  const onSubmit = (data) => {
    console.log("OnSubmit called on data: ", data);
  }

  const onFailure = (data) => {
    console.log("onFailure called on data: ", data);
  }

  // Call initializeODKPlayer in useEffect with enketo express instance url and open rosa compliant server url.
  useEffect(() => {
    initializeODKPlayer(
        "ENKETO_EXPRESS_SERVER_URI", 
        "OPEN_ROSA_SERVER_URI"
        );
  }, [])

  return (
    <div className="App">
      <header className="App-header">

        {/* Finally load the ODKPlayer component in your app providing in the required props */}
        <ODKPlayer
          formId={"Nursing Form-Medical (CRP)"}
          height='100vh'
          width='50vw'
          offline={false}
          onChange={onChange}
          onSuccess={onSubmit}
          onFailure={onFailure}
        />
      </header>
    </div>
  );
}

export default App;

Props:

Prop Type Description Default
formId string The id of the form to be rendered None
height string Height of the iframe to be rendered 100vh
width string Width of the iframe to be rendered 100vw
offline boolean Boolean to decide whether form should work offline or not false
onChange function Callback function to be executed on any form change event None
onSuccess function Callback function to be executed on successful submission of form None
onFailure function Callback function to be executed on failure of form submission None

Ending Notes:

Thank you for choosing ODK Player! I hope this library makes integrating ODK forms into your React applications a breeze. Don't forget to star my repository if you find it useful!

🌟 Star us on GitHub: [https://github.com/Samagra-Development/odk-player]

Feel free to contribute, report issues, or suggest improvements. Happy coding! 💻✨

Package Sidebar

Install

npm i odk-player

Weekly Downloads

5

Version

0.1.6

License

none

Unpacked Size

18.2 kB

Total Files

3

Last publish

Collaborators

  • amit-s19