Skip to content

Instantly share code, notes, and snippets.

@addisonschultz
Last active September 14, 2023 01:15
Show Gist options
  • Save addisonschultz/23cc128ef97d9fc96c756c1d488076b5 to your computer and use it in GitHub Desktop.
Save addisonschultz/23cc128ef97d9fc96c756c1d488076b5 to your computer and use it in GitHub Desktop.
Cloning React Children
import * as React from "react";
import { Frame, addPropertyControls, ControlType } from "framer";
export function Component({ childComponent }) {
return (
<div style={{ width: "100%" }}>
{React.Children.map(childComponent, (child, index) => {
return React.cloneElement(child, {
width: "100%",
key: index,
// Additional Props
});
})}
</div>
);
}
addPropertyControls(Component, {
childComponent: {
type: ControlType.ComponentInstance,
title: "Child Component",
},
});
@addisonschultz
Copy link
Author

@netgfx You'd have to parse the properties one level deeper, but instead, I think it might be easier to add an override onto the text element of the text you're linking to! I can see if there are some other ways as well, feel free to invite me or send me the project on Discord as well if you want!

@netgfx
Copy link

netgfx commented Nov 4, 2020

Thanks for the reply. I'm trying to avoid overrides because they are slightly more difficult to explain to clients. I have achieved the above by doing this:

 {React.Children.map(props.components, (child, index) => {
                var childComp = React.Children.map(
                    child.props.children,
                    (item) => {
                        return React.cloneElement(item, {
                            text: props.text,
                        })
                    }
                )

                return React.cloneElement(child, {
                    width: "100%",
                    key: index,
                    children: childComp,
                    // Additional Props
                })
            })}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment