Neptune's Personal Maid

    TypeScript icon, indicating that this package has built-in type declarations

    0.2.1 • Public • Published



    • Specify the width of your framed component to view it at specific breakpoints.
    • Scales rendered frame via transform to appropariately size the rendered component in relation to its parent container and desired width.
    • Copies and syncs any parent <head> tags to the rendered <iframe> to ensure parity between parent and container.


    # Yarn
    yarn add @walltowall/mainframe
    # NPM
    npm i @walltowall/mainframe --save


    import { Mainframe } from 'mainframe'
    const Example = () => {
      return (
          <div>Hello World!</div>


    <Mainframe> exposes a set of props to customize the rendering behavior of the framed component.


    The desired width to render your framed component at. Accepts any valid CSS unit such as px, rem, %, etc. targetWidth is useful for triggering a component's styles at specific breakpoints.

    Dynamic scaling

    <Mainframe> will dynamically transform: scale() itself based on the specified targetWidth in relation to its "expected width". For example, if <Mainframe> would have normally rendered at 800px but targetWidth is set to 400px, then the it will be given a transform: scale(2) property as a result. This scaling also applies for situations where targetWidth is greater than it's expected render width, resulting in a scale() < 1.

    By default, targetWidth is set to 100%.

    To granularly control how this scaling is applied, please refer to the maxScale and minScale props.

    <Mainframe targetWidth="360px">
      <div>I'll be styled like a mobile device!</div>


    React component to wrap any framed components. Use this prop if your framed components rely on any providers from redux, the context api, etc.

    const Provider = ({ children }) => <Provider>{children}</Provider>
    // Provide a component directly:
    <Mainframe wrappers={Provider}>
      <div>I'm wrapped!</div>
    // Or inline a function:
    <Mainframe wrappers={({ children }) => <Provider>{children}</Provider>}>
      <div>I'm wrapped!</div>
    // Alternatively, just wrap your children:
    <Mainframe wrappers={Provider}>
        <div>I'm wrapped!</div>


    Specify a minimum transform: scale() value that <Mainframe> must be greater than.

    For example, if minScale is set to 0.5, the underlying iFrame will never have a scale value less than transform: scale(0.5).

    ⚠️ Overflows

    Using the minScale prop with a large targetWidth is likely to cause your framed content to extend outside of its bounding container. Use with caution or alternatively use the constrainToContainer prop instead.

    <Mainframe targetWidth="1600px" minScale={0.5}>
      <div>I will always be more than scale .5!</div>


    Specify a maximum transform: scale() value that <Mainframe> must be less than.

    For example, if maxScale is set to 2, the underlying iFrame will never have a scale value more than transform: scale(2).

    <Mainframe targetWidth="320px" maxScale={2}>
      <div>I will always be less than scale 2!</div>


    If set to true, the <Mainframe> will be constrained to the height and width of its immediate parent. Scaling will still be appropriately applied based on targetWidth and the container's size.

    The rendered iFrame will also be centered horizontally and vertically inside of its container as needed.

    <Mainframe targetWidth="320px" constrainToContainer={true}>
      <div>I will adhere to my container's height and width!</div>


    React components/tags to inject into the <iframe>'s <head>.

    // Parent head:
          <title>Inject Head</title>
      <div>Inserted after!</div>
    // Resulting <iFrame> <head>:
      <title>Inject Head</title>


    Function to enable stateful access to the <head> element of the rendered iFrame. This is especially useful handy if children inside of <Mainframe> are styled-components.

    import { StyleSheetManager } from 'styled-components'
    const Example = () => {
      const [head, setHead] = useState()
      return (
        <Mainframe setHeadFn={setHead}>
          {head && (
            <StyleSheetManager target={head}>
                <StyledComponent>I will have the correct styles!</StyledComponent>


    If specified, the <Mainframe> will attempt to display the content at the provided URL like a plain <iframe>. If you specify src, you cannot specify children.

    <Mainframe src="" />
    // Specifying children with src will throw:
    <Mainframe src="">
      <div>This will error!</div>


    Callback function that is fired when the rendered iframe fires its onload callback.

    <Mainframe onFrameLoad={() => console.log('Loaded!')} />


    Arbitrary props that are spread onto the underlying <iframe>.

    ⚠️ style prop

    Overriding the style prop on the underlying <iframe> will break the dynamic resizing functionality. If you need to add additional styles to the iFrame, use iFrameStyles instead.


    Arbitrary styles that are spread onto the iFrame's style prop. Note that overriding width or height here will likely break scaling functionality.


    This package is reliant on the ResizeObserver api to work properly.

    By default, it includes a ponyfill via 'resize-observer-polyfill' to support older browsers.




    npm i @walltowall/mainframe

    DownloadsWeekly Downloads






    Unpacked Size

    71.5 kB

    Total Files


    Last publish


    • kalamak
    • walltowall-dev
    • angeloashmore
    • asyarb
    • kangken