I’m investigating: Input and need help.

[michaelsanders]

Are there examples of using Smart.DateRangeInput with state management in React (like Redux, Vuex, etc.)? How is data flow handled?

[Markov]

Hi,

I prepared a React + Redux example using Smart.DateRangeInput with state management.
You can copy this as a single file for quick testing (using Create React App or Vite).

Please, refer to this demo:

import React from 'react';
import ReactDOM from 'react-dom/client';
import { Provider, useSelector, useDispatch } from 'react-redux';
import { configureStore, createSlice } from '@reduxjs/toolkit';
import { DateRangeInput } from 'smart-webcomponents-react/daterangeinput';
import 'smart-webcomponents-react/source/styles/smart.default.css';

// ---------------- Redux Slice ----------------
const dateRangeSlice = createSlice({
  name: 'dateRange',
  initialState: {
    value: ''
  },
  reducers: {
    setDateRange: (state, action) => {
      state.value = action.payload;
    }
  }
});

const { setDateRange } = dateRangeSlice.actions;

// ---------------- Store ----------------
const store = configureStore({
  reducer: {
    dateRange: dateRangeSlice.reducer
  }
});

// ---------------- Component ----------------
const DateRangePicker = () => {
  const dispatch = useDispatch();
  const dateRange = useSelector((state) => state.dateRange.value);

  const handleChange = (event) => {
    dispatch(setDateRange(event.detail.value));
  };

  return (
    <div style={{ fontFamily: 'Arial', padding: '20px' }}>
      <h2>Smart.DateRangeInput + Redux Example</h2>
      <DateRangeInput
        value={dateRange}
        onChange={handleChange}
        placeholder="Select date range"
        style={{ width: '300px' }}
      />
      <p style={{ marginTop: '10px' }}>
        <strong>Selected Range:</strong> {dateRange}
      </p>
    </div>
  );
};

// ---------------- App Wrapper ----------------
const App = () => (
  <Provider store={store}>
    <DateRangePicker />
  </Provider>
);

// ---------------- Render ----------------
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

Best regards,
Markov

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

[Author]

Posts