I've created a wrapper-like component for a library that I use. By wrapper-like what I mean is that my component wraps their component allowing me to set some arbitrary parameters or script (kind of like a middle man).

Their component has about 100 components that you call directly as illustrated below:

import { Comp1, Comp2 } from "their-component"

return ( 
    <>
        
        
    
)

My "wrapper" allows me to do something along these lines:

import Wrapper from "their-component"

return(
    <> 
        
        
    
)

Here is some pseudocode that shows what wrapper looks like and how it's being used:

"use client"

import React, { FC } from 'react'
// ComponentObjects are Comp1, Comp2, ... Comp49,Comp50
// from the examples above,
import * as ComponentObjects from './wrapper'

export default async function (props: any) {

    // get component.props from the props " 
    let RequestedComp:any = ComponentObjects[
        props.component as keyof typeof ComponentObjects
    ]

    let modifier = props.modifier || 0

    return (
        


            
            

            
        
    )
}

Each component that "their-component" imports has various attributes that I need to change: data-foo, data-bar, data-x. I could modify each component so that foo, bar, and x are all props that can be passed... however, if I where to do this, the work would have to be redone for each update or every time a new child component gets added to their library.

update:

As of this moment I've added the "script" to a useEffect call and it seems to work. But I'm not sure if this is the best way to modify the attributes.

In clarifying my questions; it appears that I've actually deleted the question itself - The question is would this be a proper implementation in react/nextjs or would there be a more appropriate way to go about injecting javascript into their components or would modifying their components be the proper way to go about this? In its basic form; I'm unsure of the direction to move in due to being a novice with react and don't want to start off with bad habits.