A component for rendering dynamically resizeable React component in an iFrame.
npm install @walltowall/mainframe- Features
- Installation
- Usage
- API
- targetWidth
- Dynamic scaling
- wrappers
- minScale
- maxScale
- constrainToContainer
- injectHead
- head
- setHeadFn
- src
- onFrameLoad
- iFrameProps
- iFrameStyles
- Gotchas
- License
- 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 tags to the rendered to ensure
parity between parent and container.
``bashYarn
yarn add @walltowall/mainframe
Usage
`jsx
import { Mainframe } from 'mainframe'const Example = () => {
return (
Hello World!
)
}
`API
exposes a set of props to customize the rendering behavior of the
framed component.$3
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
will dynamically transform: scale() itself based on the
specified targetWidth in relation to its "expected width". For example, if
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.
`jsx
I'll be styled like a mobile device!
`$3
React component to wrap any framed components. Use this prop if your framed
components rely on any providers from
redux, the context api, etc.`jsx
const Provider = ({ children }) => {children} // Provide a component directly:
I'm wrapped!
// Or inline a function:
{children} }>
I'm wrapped!
// Alternatively, just wrap your children:
I'm wrapped!
`$3
Specify a minimum
transform: scale() value that 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.`jsx
I will always be more than scale .5!
`$3
Specify a maximum
transform: scale() value that 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).`jsx
I will always be less than scale 2!
`$3
If set to
true, the 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.
`jsx
I will adhere to my container's height and width!
`$3
React components/tags to inject into the
// Resulting
Function to enable stateful access to the
element of the rendered
iFrame. This is especially useful handy if children inside of are
styled-components.`jsx
import { StyleSheetManager } from 'styled-components'const Example = () => {
const [head, setHead] = useState()
return (
{head && (
I will have the correct styles!
)}
)
}
`$3
If specified, the
will attempt to display the content at the
provided URL like a plain