EscolaLMS / sdk

Frontend API Connector. Definition of reusable components and frontend services.
2 stars 0 forks source link
lms react sdk typescript

EscolaLMS Software Development Kit

codecov Maintainability npm npm

The following project contains:

API Documentation

Types

React

For rapid React application development here is list of

Context

Simplest React appliaction consuming Wellms Context API would look like

import React, { useContext } from "react";
import ReactDOM from "react-dom/client";
import { EscolaLMSContextProvider } from "@escolalms/sdk/lib/react/context";

declare global {
  interface Window {
    REACT_APP_API_URL: string;
  }
}

const App = () => {
  const { user, courses, fetchCourses } = useContext(EscolaLMSContext);

  useEffect(() => fetchCourses(), []);

  console.log("current user data", user);

  return (
    <React.Fragment>
      <ul>
        {courses.list.map((course) => (
          <li key={course.id}>{course.title}</li>
        ))}
      </ul>
    </React.Fragment>
  );
};

const API_URL =
  window.REACT_APP_API_URL ||
  (process && process.env && process.env.REACT_APP_PUBLIC_API_URL);

ReactDOM.createRoot(document.getElementById("root") as Element).render(
  <EscolaLMSContextProvider apiUrl={API_URL}>
    <App />
  </EscolaLMSContextProvider>
);

API endpoint calls

List of umi-request based