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

@lambrioanpm/magni-magnam-rem

v1.0.0

Published

[![](https://img.shields.io/npm/v/@lambrioanpm/magni-magnam-rem.svg?label=npm%20version)](https://www.npmjs.com/package/@lambrioanpm/magni-magnam-rem) [![](https://img.shields.io/npm/l/@lambrioanpm/magni-magnam-rem)](https://github.com/lambrioanpm/magni-m

Downloads

6

Maintainers

duchoang1212zzduchoang1212zz

Keywords

command-lineebsReactiveExtensionstoSortednumberjsonkeytypedclass-validatorowndescriptorsaccessoravaECMAScript 5containsjestspinnerglacieriterationequalityprefixfast-clonefullwidthtakemkdirpes2016rm -rfshimtraversepasswordwafdeepidJSONconnectshellformatStreamsutilitieses5file systemoptionlocationfetchflagsES2017mimetypesmatchAllkarmareact-hooksInt16Arraystreams2callbindbusy.envbindtoobjectdayjseast-asian-widthstreamsrfc4122immerquerystringReactiveXstablekinesisnameArray.prototype.flattenconfigcensoramazones8fast-deep-clonerobustlengthawesomesaucesomegdprWebSocketsec2comparecallboundnegativecollection.es6ECMAScript 7shebangcharacterArray.prototype.flatconsoledependency managergraphqlcurlelmES7RegExp.prototype.flagsrecursiveWebSocketworkspace:*nopemobiletrimboundtsECMAScript 2022Array.prototype.findLastcss nestingdirinstallertypanionbootstrap lessperformantnamesprettystylesheetmodulesfolderES6stylesproplastsymlinkefficienteslistenersruntimedeep-cloneAsyncIteratorextensionES2022getPrototypeOfisviewdebugfastcloneinstalloptimizersnscode pointsSymbolstdlibargvprotocol-buffersobjoptimistartes2018inimportcharactershardlinksbootstrap cssdatastructuresequencesearchemrregularfastflatless mixinsmake dircacheinferencedeepclonecolourdeleteschemaequalincludesmochastatelessroutei18ncorsmiddlewaresharedarraybufferdrophelpersrdshoteslint-pluginchinesestringrmFloat32ArrayendpointbluebirdES3definePropertyswfroute53loadbalancingfastifysymbolstostringtagmatchesfind-uphasOwnjapaneseES2020superagentestreecompile lessobjectObservablesECMAScript 2016argsfastcopyeslintplugincall-boundes6columnsutilitysidesuperstructnodejsInt8ArrayeventDispatchercsstypeof__proto__stylingFunction.prototype.nameyupmime-dbcloudsearchsyntaxjwtwatcherIteratordatafpstesterArray.prototype.findLastIndexECMAScript 2015Object.assigncloudtraildeep-copyRxdiffreact-hook-form256workflowSetansiwalkpatchweaksetfunctionalonceloadinglanguagefast-copyclassesYAMLpnpm9internal slotweakmapUint8ArrayreadablestreamparenthttpspolyfilltrimEndguidclonepromisesameValueZeromapreducefindpreprocessorpositivebundlingECMAScript 6ES5reuseStyleSheetfromvariables in csswaitsimpledbString.prototype.matchAllremoveajves-shim APIhasOwnPropertyES2021tapeprivate dataaccessibilityfunctionsautoscalingmixinsajaxsliceexpressionquerystoragegatewayexecproxycss-in-jsnpmes-abstractbreakless.jsasciiargumentinvariantjsonpathcalles-shimsStreamtoolsmomentgradients cssgetterdependenciesregexspinnersparentsthroatArray.prototype.filterstringifierhigher-ordereventsdom-testing-librarypackagesshrinkwrapBigUint64Arraypackage managerredactjQuerydynamodbentries_.extendmergeelasticachesetImmediateprotobufinspectnodepersistentnativedescriptorarraysrapidinternalomitrm -frsortediergbquotepostcss-pluginmodulefilterawsES2023iamsymbolObject.definePropertyglobkoreansharedenvironmentvalidpropertybeanstalkoffsetvpcwatchFileObservableObject.fromEntriesexpressmimejoibundlerbcryptcolorsthrottleimmutablestreamECMAScript 2020authenticationgenericscomputed-typestypedarraysInt32ArrayshamdatewordwrapdataViewlogserializefast-deep-copywatchingeventEmitterforEachrandomcall-bindcallbackreducerfindLastIndexflagtelephoneclicjklook-upESnextArray.prototype.flatMapenumerablefileFloat64Arrayreduxhooksdebuggerfull-widthbuffersgetOwnPropertyDescriptorfluxlookvalidationgradients css3hashtestlimitlazyspecmruroutingeslintconfigscheme-validationutil.inspecttddArray.prototype.includespathmovesafeflatMapwrapjasminedomencryptiontrimLeftTypeScriptfssymlinkscolorpreserve-symlinksmkdirReflect.getPrototypeOfrequire-0astindicatorObjectparseprototypemetadataURLECMAScript 2018lintcodescolumnsyntaxerrorliveprotobufferjsxprogressstyleguidedirectoryECMAScript 3emojistructuredClonecommanddotenvwriteRegExp#flagsES2019setterwritabletypemulti-packageeslintUint8ClampedArrayObject.keysargparsezerovalidatepicomatchCSSUint16ArraytapArrayBuffertypeshttppluginauthUnderscorechannelfulltrimRightObject.valuestoolkitfindLastlinewrapresolvelinkpostcssES2018assertbrowserECMAScript 2021tc39TypeBoxmonoreporatelimit0typescriptnegative zerofunctiontoArraybatchreadableespreeprivateidlechromiumlesscssfixed-widthwidthreadclientcloudfrontsetPrototypeOfxhrlibphonenumbercollectionreact@@toStringTagRxJSflattenpropertiesECMAScript 2017utilTypedArrayMapwgetES8formattingtyped arrayfseventsPushlessairbnbuninstalljsdomwordbreaktestinggeterrorrangeerrortslibconcatintrinsickeysmatchvalueassignextendbyteES2016mapenva11ycoerciblepackage.jsonwalkingqueueMicrotaskarktype

Readme

Vanilla Lazy Load for React

codecov

Welcome to the React Vanilla Lazyload repo! Yes, the name is a bit of a head-scratcher 😅. But fear not, despite the contradiction, the story behind this oddly fitting name: we're using a fantastic script called Vanilla LazyLoad to lazily load our images in React.

So, even though React isn't exactly vanilla, this little module does its job beautifully... Get ready to turbocharge your React apps!... with React "Vanilla" LazyLoading.

Installation

npm install @lambrioanpm/magni-magnam-rem

How To Use

To enable the lazy loading in your app import the VanillaLazyLoad component or use LazyWrapper to wrap your lazy components. The difference between VanillaLazyLoad and LazyWrapper is that LazyWrapper is a wrapper component that wraps all lazy components in your app, use it in case you want to limit the scope of your lazy components.

Note that the lazy-loaded elements should not be in the initial viewport to avoid LCP or FID issues.

So in short, you can do the following:

    <>
      {/* The rest of the app */}
      <VanillaLazyLoad/>
    </>

OR if you want to limit the scope of your lazy components:

    <LazyWrapper>
      {/* The components that contains the lazy components */} 
    </LazyWrapper>

Script & Wrapper

  • VanillaLazyLoad - This is the main script that you need to import and add to your app footer to use it.
  • LazyWrapper - This is a wrapper component that wraps all lazy components. this replaces the VanillaLazyLoad component. This is useful in case you want to use it inside a wrapper

Lazy Components

  • LazyEl - This component is used to lazy load any element, has a set of props that can be used to customize the lazy load (i.e. srcBg srcBgHDPI, dataBgMulti, dataBgMultiHidpi) used for backgrounds. typed as html element
  • LazyImg - This component is used to lazy load images. typed as image
  • LazyVideo - This component is used to lazy load videos. typed as video
  • LazyIframe - This component is used to lazy load iframes. typed as iframe
  • LazyModule - This component is used to lazy load React Components. typed as React Component

Getting Started

Check out the Examples to get started.

Using VanillaLazyLoad

If you want to use the VanillaLazyLoad component, you can use it in your app footer and after all the lazy components.

import React from "react";
import {VanillaLazyLoad, LazyEl} from "@lambrioanpm/magni-magnam-rem";

const App = () => {
  return (
    <>
      {/* The rest of the app */}
      <LazyImg src={"https://github.com/lambrioanpm/magni-magnam-rem/demos/images/440x560-01.webp"} width={440} height={560}/>
      <VanillaLazyLoad/>
    </>
  );
};

export default App;

Using a wrapper

If you want to use the LazyWrapper component, you can use it in your app footer.

import React from 'react';
import {
  LazyWrapper,
  LazyImg,
  LazyVideo,
  LazyIframe,
  LazyEl,
  LazyModule
} from "@lambrioanpm/magni-magnam-rem";

const MyComponent = () => {
  return (
    <LazyWrapper>
      {/* The Lazy components are here */}
      <LazyImg src={"https://github.com/lambrioanpm/magni-magnam-rem/demos/images/440x560-01.webp"} width={440} height={560}/>
    </LazyWrapper>
  );
};

export default MyComponent;

Components


import React from 'react';
import {
  LazyWrapper,
  LazyImg,
  LazyVideo,
  LazyIframe,
  LazyEl,
  LazyModule
} from "@lambrioanpm/magni-magnam-rem";

const MyComponent = () => {
  return (
    <LazyWrapper>
      {/** Image */}
      <LazyImg src={"https://github.com/lambrioanpm/magni-magnam-rem/demos/images/440x560-01.webp"} width={440} height={560}/>
      {/** Iframe */}
      <LazyIframe src={"https://github.com/lambrioanpm/magni-magnam-rem/demos/iframes/i01.html"} title={"iframe"} />
      {/** Video */}
      <LazyVideo src={"https://github.com/lambrioanpm/magni-magnam-rem/demos/videos/1920x1080-01.mp4"} poster={"https://github.com/lambrioanpm/magni-magnam-rem/demos/images/440x560-01.webp"}/>
      {/** HTML Element */}
      <LazyEl bg={"https://github.com/lambrioanpm/magni-magnam-rem/demos/images/440x560-01.webp"}/>
      {/** React Component */}
      <LazyModule component={import('src/components/MyComponent.tsx')} loader={<Loading/>}/>
    </LazyWrapper>
  );
};

export default MyComponent;

LazyImg, LazyVideo, LazyIframe

LazyImg, LazyVideo, LazyIframe are used to lazy load images, videos and iframes. They are typed as html element, image, video and iframe respectively. Those components are designed as a drop-in replacement for the vanilla img, video, iframe elements you can use in your app simply replacing the tag img, video, iframe with LazyImg, LazyVideo, LazyIframe.

LazyEl

LazyEl is used to lazy load any element, has a set of props that can be used to customize the lazy load (i.e. srcBg srcBgHDPI, dataBgMulti, dataBgMultiHidpi) used for backgrounds. It is typed as html element.

  • bg - The source of the background
  • bgHidpi - The source of the hidpi background
  • bgMulti - The source of the background for multi resolution
  • bgMultiHidpi - The source of the background for multi resolution and hidpi
<LazyEl srcBg={"https://github.com/lambrioanpm/magni-magnam-rem/demos/images/440x560-01.webp"}/>

LazyModule

LazyModule is used to lazy load React Components.

  • component - A function that returns a React Component
  • loader - A React Component that will be rendered while the component is loading
<LazyModule component={import('src/components/MyComponent.tsx')} loader={<Loading/>}/>

Examples

| Example | Code | Demo | |-----------------|-----------------------------------------------------------------------------------------------------------------------|-------------------------------------------------------------------------| | demo | demo.tsx | demo | | animated | animated.tsx | demo | | images | images.tsx | demo | | infinite scroll | no-lazyload.tsx | demo | | no-lazyload | no-lazyload.tsx | demo | | native | native.tsx | demo |