npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

lucify-embed-utils

v0.1.2

Published

Utilities for embedding React components in iFrames

Downloads

2

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Git

Maintainers

lucify-masterlucify-master

Keywords

Readme

Utilities for embedding (with) React components

About

This is a pre-release of a package belonging to the Lucify platform. It has been published merely to satisfy dependencies of other packages. Any APIs may change without notice.

This package contains some utilities for:

  • Making React components embeddable in iframes, with support for iframe resizing
  • Embedding external web sites in React applications with iFrames, with support for automatic iframe resizing

IFrame resizing is based on the iframe-resizer project by David Bradshaw.

IFrameEmbed

import { IFrameEmbed } from 'lucify-embed-utils'
// Use IFrameEmbed as regular React Component

React component for embedding a web page in an iframe. The web page to be embedded should include the iframeResizer.contentWindow.min.js for resizing to work.

The only React prop is url, which is the URL for the page to be embedded. The component will initialize iframe-resizer to support automatic resizing of the page.

Notes

The original iframe-resizer implementation unfortunately does not work properly when the module is loaded twice. This can happen if iframe-resizer is a dependency for multiple submodules of a project. The forked resize implementation in this project makes sure it is loaded only once.

TODO

Add code for generating embed codes.

License

MIT