Skip to content

Instantly share code, notes, and snippets.

@romgrk

romgrk/page.tsx

Created May 21, 2025 22:37
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save romgrk/023d376d54f38812c2ba3f91b96eace0 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save romgrk/023d376d54f38812c2ba3f91b96eace0 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. romgrk created this gist May 21, 2025.
    65 changes: 65 additions & 0 deletions page.tsx
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,65 @@
    'use client';

    import * as React from 'react';

    import { Flex } from '@joy-ui/react';
    import { useRenderElement } from '@base-ui-components/react';

    import './page.css';

    import './perf-test.css'

    export default function Home() {
    const [show, setShow] = React.useState(false)
    return (
    <Flex direction='column'>
    <h1>Test</h1>
    <button onClick={() => setShow(!show)}>run</button>
    {show && <Wrapper />}
    </Flex>
    );
    }

    function Button(props: any) {
    const { render, className, ...otherProps } = props;

    otherProps.className = 'Button'

    const state = React.useMemo(
    () => ({
    open: true,
    side: 'bottom',
    align: 'left',
    uncentered: true,
    }),
    [],
    );

    const element = useRenderElement('button', props, {
    state,
    props: otherProps,
    });

    return element;
    }

    function Wrapper() {
    return (
    <div>
    {Array.from({ length: 10 }).map((i) =>
    <div key={i as any}>
    <Button>test</Button>
    <Button>test</Button>
    <Button>test</Button>
    <Button>test</Button>
    <Button>test</Button>
    <Button>test</Button>
    <Button>test</Button>
    <Button>test</Button>
    <Button>test</Button>
    <Button>test</Button>
    </div>
    )}
    </div>
    )
    }
    29 changes: 29 additions & 0 deletions perf-test.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,29 @@
    .Button {
    &[data-open] {
    color: red;
    }
    &[data-side="bottom"] {
    border: 1px solid red;
    }
    &[data-align="left"] {
    background-color: rgba(255, 0, 0, 0.1);
    }
    &[data-uncentered] {
    border-style: dashed;
    }
    }

    .Button {
    &.state-open {
    color: red;
    }
    &.state-side--bottom {
    border: 1px solid red;
    }
    &.state-align--left {
    background-color: rgba(255, 0, 0, 0.1);
    }
    &.state-uncentered {
    border-style: dashed;
    }
    }