SolidJSS
SolidJSā€¢3y agoā€¢
37 replies
DaOfficialWizardšŸ§™

Help with some JSX logic in Typescript on an Advanced Resizing Component

I am working on making a custom resizing component wrapper for my app. I have the resizing logic all working as i would like it to, however i am trying to implement edge handlers so that i can attach the resize event handlers to the edge of a child component.

Here is the github gist to my resizer.tsx

The following is an example usage:

import { ParentComponent, createSignal } from 'solid-js'
import { Resizer, ResizerContent } from '@components/ui/resize'

const Sidebar: ParentComponent = (props) => {
    const [sidebar, setSidebar] = createSignal<HTMLDivElement | null>(null)
    const [width, setWidth] = createSignal<number>(425)
    let resizer!: HTMLDivElement

    const changeWidth = (clientY: number) => {
        if (clientY < 0) return
        setWidth(clientY)
    }

    return (
        <div class="card h-auto pb-8 min-h-0">
            <Resizer
                ref={resizer}
                side="right"
                onResize={(clientY, clientX) => {
                    changeWidth(clientY)
                }}>
                {(edgeHandler) => (
                    <ResizerContent edgeHandler={edgeHandler}>
                        <aside
                            ref={setSidebar}
                            style={{
                                width: `${width()}px`,
                            }}>
                            {props.children}
                        </aside>
                    </ResizerContent>
                )}
            </Resizer>
        </div>
    )
}


However this approach is not working, i will post the error below.
Was this page helpful?