Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

why interweave transform attributes to lowercase? #260

Open
Intaria opened this issue Aug 6, 2023 · 5 comments
Open

why interweave transform attributes to lowercase? #260

Intaria opened this issue Aug 6, 2023 · 5 comments

Comments

@Intaria
Copy link

Intaria commented Aug 6, 2023

Good afternoon. Can you please tell me why interweave transforms all attributes to lowercase?

I am trying to do something like this, for not to describe each attribute by hand:

const onTransform = (node: HTMLElement, children: Node[]): ReactNode => {
    const attributes = {}

    node.attributes.map((item) => {
        attributes[item['name']] = item['value']
    })


    switch (node.tagName) {
        case 'a':
            return (
                <Link {...attributes}>{children}</Link>
            )

        case 'img':
            return (
                <Image {...attributes} />
            )
        
        default:
            return undefined
    }
}

And got this:
​ Warning: Invalid DOM property `classname`. Did you mean `className`?

@milesj
Copy link
Owner

milesj commented Aug 6, 2023

Attributes are HTML attributes, which are lowercase.

If you are converting an HTML element into a React component, you'll need to remap it to props manually.

@Intaria
Copy link
Author

Intaria commented Aug 6, 2023

Then is it possible to pass raw attributes too in HTMLElement node?

@milesj
Copy link
Owner

milesj commented Aug 7, 2023

Not sure I follow? Just do this:

const onTransform = (node: HTMLElement, children: Node[]): ReactNode => {
    const attributes = {}

    node.attributes.map((item) => {
        attributes[item['name']] = item['value']
    })

    // this 
    attributes.className = attributes.classname;

    switch (node.tagName) {
        case 'a':
            return (
                <Link {...attributes}>{children}</Link>
            )

        case 'img':
            return (
                <Image {...attributes} />
            )
        
        default:
            return undefined
    }
}

@Intaria
Copy link
Author

Intaria commented Aug 7, 2023

I am trying to create an HOC component. For it i need the ability to forward any attributes to the tag.

The problem is that there are a lot of options in react, which can be different: className, tabIndex, defaultChecked, itemScope, itemType, etc. And listing them all by hand seems like a crutch

@milesj
Copy link
Owner

milesj commented Aug 7, 2023

You only need to write this once, it's only a couple of lines. This won't be changing.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants