Search code examples
javascriptcssreactjsreact-reduxstyled-components

Render react component preview

Today I have the following problem: I have a form to set the title, background color, button background and text color, etc, of a component, and I want to render a preview of that component while the user is changing the settings.

The thing is, I want to render a "preview" of the component, suppose in an small viewport (or do like a zoom-out) next to the form, so the user can preview the component while he (or she) is changing the style of the component. The readable of the texts is not important, the only thing I want to do is to give an idea to the user of how the component will change once he save the new settings.

enter image description here

Something like that is the form, and I want to render a preview of the component (zoomed-out) next to the form.

Any ideas?

Thanks.

Solution

  • Why not use css transform scale?

    Roughly like this

    const Test = styled.div`
  ${props => props.preview && `
    transform: scale(0.5);
  `};
`;

    https://codesandbox.io/s/o5w0588ymq