framer-motion#transform TypeScript Examples

The following examples show how to use framer-motion#transform. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: search-bar.tsx    From bitpay-browser-extension with MIT License 5 votes vote down vote up 
SearchBar: React.FC<any> = ({ output, value, tracking, placeholder, autoFocus }) => {
  const [analyticsSubject] = useState(new Subject());
  useEffect(() => {
    analyticsSubject.pipe(debounceTime(1000)).subscribe(query => {
      tracking.trackEvent({ action: 'searched', query, gaAction: `searched:${query}` });
    });
  }, [analyticsSubject, tracking]);
  const onChange = (e: React.FormEvent<HTMLInputElement>): void => {
    output(e.currentTarget.value);
    analyticsSubject.next(e.currentTarget.value);
  };
  const clearSearchBox = (): void => {
    output('');
    tracking.trackEvent({ action: 'clearedSearchBox' });
  };
  const [scrollY, setScrollY] = useState(window.scrollY);
  const boxShadow = { boxShadow: `0 1px 5px 0 rgba(0, 0, 0, ${transform(scrollY, [0, 20], [0, 0.05])})` };
  useEffect(() => {
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    const handleScroll = (e: any): void => setScrollY(e?.currentTarget?.scrollTop);
    const parent = document.getElementById('search-bar')?.parentElement;
    if (parent) parent.addEventListener('scroll', handleScroll, { passive: true });
    return (): void => parent?.removeEventListener('scroll', handleScroll);
  }, []);
  return (
    <motion.div id="search-bar" className="search-bar--wrapper" style={boxShadow}>
      <div className="search-bar">
        <div className="search-bar__box">
          <input
            // eslint-disable-next-line jsx-a11y/no-autofocus
            autoFocus={autoFocus}
            value={value || ''}
            onChange={onChange}
            className="search-bar__box__input"
            placeholder={placeholder || `Search Brand or Category`}
            type="text"
          />
          {value ? (
            <button onClick={clearSearchBox} className="d-flex" type="button">
              <img
                id="searchClearIcon"
                className="search-bar__box__icon"
                alt="search"
                src="../assets/icons/search-clear-icon.svg"
              />
            </button>
          ) : (
            <img id="searchIcon" className="search-bar__box__icon" alt="search" src="../assets/icons/search-icon.svg" />
          )}
        </div>
      </div>
    </motion.div>
  );
}