Hi,

Yes, you can absolutely use Smart.DateRangeInput in a React app that interacts with a REST API. The component itself is a UI element for date range selection, so you can easily capture the selected range and then call your API with those dates as query parameters or in the request body.

Please, take a look at:

import React, { useRef, useState } from 'react';
import { DateRangeInput } from 'smart-webcomponents-react/daterangeinput';
import axios from 'axios';

export default function DateRangeExample() {
  const dateRangeRef = useRef();
  const [data, setData] = useState([]);

  const fetchData = async () => {
    const value = dateRangeRef.current.value; 
    const [startDate, endDate] = value.split(' - ');

    try {
      const response = await axios.get('https://api.example.com/data', {
        params: {
          start: startDate,
          end: endDate
        }
      });
      setData(response.data);
    } catch (error) {
      console.error('API Error:', error);
    }
  };

  return (
    <div>
      <DateRangeInput ref={dateRangeRef} placeholder="Select date range" />
      <button onClick={fetchData}>Load Data</button>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

Regards,
Markov

Smart UI Team
https://www.htmlelements.com/