API desmos-react

Сьогодні ми навчимося всьому, що потрібно для початку роботи з demos-react API.

Встановлення

npm install @types/desmos desmos-react

Потім вам потрібно додати JS файл з вашими API ключами в файл index.html.

Додавання калькулятора

У нашому файлі Plotter.jsx

import { GraphingCalculator } from "desmos-react";  

const Plotter = () => {  
 return (  

Plotter
    );   
};      
export default Plotter;

Але наразі він не буде відображатися, оскільки ми ще не встановили ширину та висоту калькулятора. У файлі style.css додаємо:

.calculator {    
  width: 100vw;    
  height: 80vh;   
}  

Тепер ви повинні побачити графічний калькулятор на екрані. Але як ми можемо отримати доступ до всіх інших функцій Desmos API? Для цього нам потрібно створити посилання на калькулятор.

const plotterRef = useRef(null)

Тепер ми можемо отримати доступ до всіх функцій API через plotterRef.current. Давайте зробимо так, щоб графіки зберігалися та завантажувалися з локального сховища. Для цього ми будемо використовувати метод getState, який надається API.

import { GraphingCalculator } from "desmos-react";   
import { useEffect, useRef } from "react";      
const Plotter = () => {    
  const plotterRef = useRef(null);       
  const saveState = () => {    
    // отримуємо поточний стан калькулятора    
    const state = plotterRef.current.getState();    
    // перетворюємо його в рядок    
    const stringifiedState = JSON.stringify(state);    
    // зберігаємо в локальному сховищі    
    localStorage.setItem("state", stringifiedState);    
  };       
  // виконується при завантаженні компонента    
  useEffect(() => {    
    // при завантаженні отримуємо дані з локального сховища    
    const savedState = localStorage.getItem("state");    
    // встановлюємо збережені дані за допомогою методу setState    
    if (savedState && savedState !== "")    
      plotterRef.current.setState(JSON.parse(savedState));    
  }, []);       
  return (  
Plotter  
Save    
  );   
};      
export default Plotter;

Тепер має зберігатися стан, коли ви натискаєте кнопку збереження. Додамо ще одну функцію для розваги. Давайте зробимо так, щоб калькулятор робив скріншот себе. Для цього можна використати асинхронну функцію screenshot, яка входить до складу API. Вона потребує функції зворотного виклику (callback). Також можна налаштувати параметри за бажанням.
У документації є ще багато цікавого.

import { GraphingCalculator } from "desmos-react";  
import { useEffect, useRef } from "react";  

const Plotter = () => {  
 const plotterRef = useRef(null);  

 const saveState = () => {  
 // отримати поточний стан калькулятора  
 const state = plotterRef.current.getState();  
 // перетворити його на рядок  
 const stringifiedState = JSON.stringify(state);  
 // зберегти в локальному сховищі  
 localStorage.setItem("state", stringifiedState);  
 };  

 const takeScreenShot = () => {  
 // потребує функції зворотного виклику  
 plotterRef.current.asyncScreenshot((data) => {  
 var a = document.createElement("a");  
 a.href = data;  
 a.download = "Image.png";  
 a.click();  
 a.remove();  
 });  
 };  

 // виконується при завантаженні компонента  
 useEffect(() => {  
 // при завантаженні отримуємо дані з локального сховища  
 const savedState = localStorage.getItem("state");  
 // встановлюємо збережені дані за допомогою методу setState  
 if (savedState && savedState !== "")  
 plotterRef.current.setState(JSON.parse(savedState));  
 }, []);  

 return (  

Plotter  
Save    Take Screenshot    
    );   
};      
export default Plotter;

Ви можете зробити набагато більше, і я настійно рекомендую ознайомитися з офіційною документацією для додаткових цікавих можливостей. Я впевнений, що ви знайдете щось корисне. Просто пам'ятайте, що всі ці функції та методи можна використовувати через plotterRef.current. Насолоджуйтесь!

Перекладено з: Desmos-react API