function Checkbox(props) {
    // ...
    const [checked, setChecked, isControll] = useControll(props, "checked", "defaultChecked");
    // ...
}

// min-width: 1500px -> count === 5
// min-width: 1000px -> count === 4
// min-width: 600px -> count === 3
// 不匹配媒体查询则使用默认值 count === 2
const count = useMedia(["(min-width: 1500px)", "(min-width: 1000px)", "(min-width: 600px)"], [5, 4, 3], 2);

const container = useContainer();

function Model() {
    const renderPortal = usePortal();
 
    return renderPortal(
        <div>
            <h1>我是弹出框</h1>
        </div>
    );
}

import useTranstion, { UNMOUNTED, ENTERING, ENTERED, EXITING, EXITED } from "utils-hooks/es/useTranstion";
 
function App() {
    // 是否可见, 切换此状态来改变是否 state
    const [visible] = useState(false);
    const [ref, state] = useTranstion(visible);
    // 默认状态 state == UNMOUNTED
 
    return <div ref={ref}>有过度css的元素</div>;
}

useObserverScroll((event, down) => {
    console.log(`向${down ? "下" : "上"}滚动了`);
});

import { MonitorState, MonitorStateTest } from "utils-hooks";
const countStore = new MonitorState(0);
 
export function MonitorStateTest() {
    const [count, setCount] = useGlobalState<number>(countStore);
 
    return (
        <div>
            当前count: {count}
            <button onClick={() => setCount(count + 1)}>增加</button>
            <button onClick={() => setCount(count - 1)}>减少</button>
        </div>
    );
}

var div = document.getById("abc");
useOutsideClick([div], () => {
    console.log("点击到空白处了");
});

function app() {
    const ref = useTrigger(["click"], ["click"], (actived) => {
        console.log(actived ? "激活了" : "取消激活");
    });
 
    return <div ref={ref} />;
}

function app() {
    const [searchTerm, setSearchTerm] = useState("");
    const debouncedSearchTerm = useDebounce(searchTerm, 500);
    const [isSearching, setIsSearching] = useState(false);
    const [results, setResults] = useState([]);
 
    // Effect for API call
    useEffect(() => {
        if (debouncedSearchTerm) {
            setIsSearching(true);
            searchCharacters(debouncedSearchTerm).then((results) => {
                setIsSearching(false);
                setResults(results);
            });
        } else {
            setResults([]);
        }
    }, [debouncedSearchTerm]); // Only call effect if debounced search term changes
 
    return (
        <div>
            <input placeholder="Search Marvel Comics" onChange={(e) => setSearchTerm(e.target.value)} />
            {isSearching && <div>Searching ...</div>}
        </div>
    );
}