Skip to content

Commit

Permalink
Set the width of the wrapper div to 100% to preserve the "full width"…
Browse files Browse the repository at this point in the history
… expectation of embedded components (#86)
  • Loading branch information
jorgea-stripe authored Apr 17, 2024
1 parent ce4ddd2 commit 28c3ed3
Showing 1 changed file with 6 additions and 1 deletion.
7 changes: 6 additions & 1 deletion src/useCreateComponent.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -14,11 +14,16 @@ export const useCreateComponent = <T extends ConnectElementTagName>(
>(null);
const {connectInstance} = useConnectComponents();
const wrapperDivRef = React.useRef<HTMLDivElement | null>(null);
const wrapper = <div ref={wrapperDivRef}></div>;

// We set width to 100% to preserve this functionality aspect of embedded components even though
// we are introducing a wrapper div for this element
// https://docs.corp.stripe.com/connect/get-started-connect-embedded-components#width-and-height
const wrapper = <div style={{width: '100%'}} ref={wrapperDivRef}></div>;

React.useLayoutEffect(() => {
if (wrapperDivRef.current !== null && component === null) {
const newComponent = connectInstance.create(tagName);

setComponent(newComponent);
if (newComponent !== null) {
try {
Expand Down

0 comments on commit 28c3ed3

Please sign in to comment.