useURLSync

Custom React Hook สำหรับซิงค์ state กับ URL parameters ด้วย react-router-dom

การติดตั้ง

npm install util-explore

วิธีใช้งาน

import { useURLSync } from 'util-explore';

const searchData = { name: 'John', age: 25 };
const mapping = { name: 'search_name', age: 'search_age' };

useURLSync(searchData, mapping);

ตัวอย่าง

import React, { useState } from 'react';
import { useURLSync } from 'util-explore';

const SearchComponent = () => {
  const [search, setSearch] = useState({ name: '', age: '' });
  const mapping = { name: 'search_name', age: 'search_age' };

  useURLSync(search, mapping);

  return (
    <div>
      <input value={search.name} onChange={e => setSearch(s => ({ ...s, name: e.target.value }))} />
      <input value={search.age} onChange={e => setSearch(s => ({ ...s, age: e.target.value }))} />
    </div>
  );
};

Options

• replace (boolean): ใช้ replace หรือ push history (default: false)
• prefix (string): เพิ่ม prefix ให้กับชื่อ parameter ใน URL

License

MIT