[Feature Request] A better implementation of headless component

[liho00]

I am just sharing the idea of better implementation of the existing component. The way below we have more control of the value to the children div or components. Hence we no need to create extra state to save the progress value etc. The methods below can be found in many packages or headless components such as headless tailwind ui, rainbowkit

children({...props}) allow to pass any properties and value to the children directly.

import Link from 'next/link';

const NavLink = ({ children, href, activeClassName = '', ...props }) => {
  const router = useRouter();
  return (
    <Link href={href} {...props}>
      {children({ active: router.asPath === href })}
    </Link>
  );
};

The component below direct provide the value to its children components without creating extra state or create global state outside the component.

 <NavLink href="/card">
                  {({ active }) => {
                    return (
                      <span
                        className={classNames(
                          active
                            ? 'text-hampton-200 shadow-[#cfb286] [text-shadow:_0_1px_12px_var(--tw-shadow-color)]'
                            : 'text-hampton-200/30 hover:text-hampton-200/70 transition',
                        )}
                      >
                        Cards
                      </span>
                    );
                  }}
                </NavLink>

Current Behavior:

cost [progress,setProgress] = useState({value: 0})

    <Scrollytelling.Root
      // start="top top"
      // end="bottom bottom"
      scrub={1}
      debug={true}
    >
      <Scrollytelling.Animation
   tween={{
              start: 0,
              end: 100,
              target: progress,
              to: {
                value: 1,
                onUpdate: () => setProgress(progress.value),
              },
            }}
      >
          <div>
             // assume having a deep nested children
              <motion.div
              className="absolute inset-0 bg-gradient-to-b from-sky-50 to-sky-100 opacity-100"
              style={{ opacity: progress }}
            >
              Test opacity progress
            </motion.div>
          </div>
          );
        }}
      </Scrollytelling.Animation>
    </Scrollytelling.Root>

Expected Result:

    <Scrollytelling.Root
      // start="top top"
      // end="bottom bottom"
      scrub={1}
      debug={true}
    >
      <Scrollytelling.Animation
        tween={{
          start: 0,
          end: 55,
        }}
      >
        {({ progress, ...props }) => {
          return (
          <div>
             // assume i always need to pass the progress and props to deep nested children
              <motion.div
              {...props}
              className="absolute inset-0 bg-gradient-to-b from-sky-50 to-sky-100 opacity-100"
              style={{ opacity: progress }}
            >
              Test opacity progress
            </motion.div>
          </div>
          );
        }}
      </Scrollytelling.Animation>
    </Scrollytelling.Root>