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

react-wistia-embed

v0.1.2

Published

react-wistia-embed is a React component library that provides a simple way to embed Wistia videos in your React applications. The library includes a WistiaEmbed component that allows you to embed videos with custom settings such as responsive sizing, padd

Downloads

5

Readme

react-wistia-embed

react-wistia-embed is a React component library that provides a simple way to embed Wistia videos in your React applications. The library includes a WistiaEmbed component that allows you to embed videos with custom settings such as responsive sizing, padding, and fixed dimensions. The component is built with TypeScript, ensuring type safety and ease of use. With react-wistia-embed, you can easily add Wistia videos to your React applications without having to write complex embed code.

Installation

To use react-wistia-embed in your React application, you can install it using NPM or Yarn:

Copy code

npm install react-wistia-embed

# or

yarn add react-wistia-embed

Usage

To use the WistiaEmbed component in your React application, import it from the react-wistia-embed package:

Copy code

import WistiaEmbed from 'react-wistia-embed';

function MyComponent() {
  return <WistiaEmbed hashedId="s3lqfi0zn7" />;
}

The WistiaEmbed component takes several props that allow you to customize the embedded video:

hashedId (required): the Wistia hashed ID of the video to embed isResponsive (optional, default true): whether to make the video responsive or use fixed dimensions padding (optional): the padding to apply around the video (only used when isResponsive is true) width (optional): the fixed width to apply to the video (only used when isResponsive is false) height (optional): the fixed height to apply to the video (only used when isResponsive is false) For example, to embed a video with fixed dimensions, you can use the following code:

Copy code

import WistiaEmbed from 'react-wistia-embed';

function MyComponent() {
  return <WistiaEmbed hashedId="s3lqfi0zn7" isResponsive={false} width={640} height={480} />;
}

Contributing

If you'd like to contribute to react-wistia-embed, feel free to open an issue or pull request on GitHub. We welcome any contributions or feedback!

License

react-wistia-embed is released under the MIT license. See LICENSE for details.