Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

react-use-presentation

Package Overview
Dependencies
Maintainers
1
Versions
9
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-use-presentation - npm Package Compare versions

Comparing version 1.0.0 to 1.1.0

7

CHANGELOG.md

@@ -5,2 +5,9 @@ # Changelog

## [1.1.0](https://github.com/olavoparno/react-use-presentation/compare/v1.0.0...v1.1.0) (2021-02-11)
### Features
* **project:** add new info from the hook ([2650a19](https://github.com/olavoparno/react-use-presentation/commit/2650a19ee54fa7e69549617fd5db60611a100b59))
## 1.0.0 (2021-02-09)

6

dist/index.d.ts

@@ -1,2 +0,2 @@

import { Component } from "react";
import { Component } from 'react';
declare type TFrameOptions = {

@@ -7,7 +7,7 @@ component: Component | null;

declare type TUsePresentation = {
framesOptions: Array<TFrameOptions>;
framesOptions: TFrameOptions[];
startDelay?: number;
isLoop?: boolean;
};
declare function usePresentation({ framesOptions, startDelay, isLoop }: TUsePresentation): () => Component<{}, {}, any> | null;
declare function usePresentation({ framesOptions, startDelay, isLoop, }: TUsePresentation): (number | Component)[];
export default usePresentation;

4

dist/index.es.js

@@ -1,2 +0,2 @@

import{useState as e,useRef as n,useCallback as t,useEffect as r,useMemo as o}from"react";
import{useState as n,useRef as e,useCallback as t,useEffect as r,useMemo as o}from"react";
/*! *****************************************************************************

@@ -15,2 +15,2 @@ Copyright (c) Microsoft Corporation.

PERFORMANCE OF THIS SOFTWARE.
***************************************************************************** */function u(e,n,t,r){return new(t||(t=Promise))((function(o,u){function a(e){try{c(r.next(e))}catch(e){u(e)}}function i(e){try{c(r.throw(e))}catch(e){u(e)}}function c(e){var n;e.done?o(e.value):(n=e.value,n instanceof t?n:new t((function(e){e(n)}))).then(a,i)}c((r=r.apply(e,n||[])).next())}))}function a(e,n){var t,r,o,u,a={label:0,sent:function(){if(1&o[0])throw o[1];return o[1]},trys:[],ops:[]};return u={next:i(0),throw:i(1),return:i(2)},"function"==typeof Symbol&&(u[Symbol.iterator]=function(){return this}),u;function i(u){return function(i){return function(u){if(t)throw new TypeError("Generator is already executing.");for(;a;)try{if(t=1,r&&(o=2&u[0]?r.return:u[0]?r.throw||((o=r.return)&&o.call(r),0):r.next)&&!(o=o.call(r,u[1])).done)return o;switch(r=0,o&&(u=[2&u[0],o.value]),u[0]){case 0:case 1:o=u;break;case 4:return a.label++,{value:u[1],done:!1};case 5:a.label++,r=u[1],u=[0];continue;case 7:u=a.ops.pop(),a.trys.pop();continue;default:if(!(o=a.trys,(o=o.length>0&&o[o.length-1])||6!==u[0]&&2!==u[0])){a=0;continue}if(3===u[0]&&(!o||u[1]>o[0]&&u[1]<o[3])){a.label=u[1];break}if(6===u[0]&&a.label<o[1]){a.label=o[1],o=u;break}if(o&&a.label<o[2]){a.label=o[2],a.ops.push(u);break}o[2]&&a.ops.pop(),a.trys.pop();continue}u=n.call(e,a)}catch(e){u=[6,e],r=0}finally{t=o=0}if(5&u[0])throw u[1];return{value:u[0]?u[1]:void 0,done:!0}}([u,i])}}}function i(e){var n="function"==typeof Symbol&&Symbol.iterator,t=n&&e[n],r=0;if(t)return t.call(e);if(e&&"number"==typeof e.length)return{next:function(){return e&&r>=e.length&&(e=void 0),{value:e&&e[r++],done:!e}}};throw new TypeError(n?"Object is not iterable.":"Symbol.iterator is not defined.")}function c(e){if(!Symbol.asyncIterator)throw new TypeError("Symbol.asyncIterator is not defined.");var n,t=e[Symbol.asyncIterator];return t?t.call(e):(e=i(e),n={},r("next"),r("throw"),r("return"),n[Symbol.asyncIterator]=function(){return this},n);function r(t){n[t]=e[t]&&function(n){return new Promise((function(r,o){(function(e,n,t,r){Promise.resolve(r).then((function(n){e({value:n,done:t})}),n)})(r,o,(n=e[t](n)).done,n.value)}))}}}export default function(i){var l=this,s=i.framesOptions,f=i.startDelay,y=void 0===f?void 0:f,b=i.isLoop,h=void 0!==b&&b,p=e(null),v=p[0],d=p[1],m=e({}),w=m[0],x=m[1],S=n(s),g=t((function(){return u(l,void 0,void 0,(function(){var e,n,t,r,o,u,i,l,s;return a(this,(function(a){switch(a.label){case 0:return y?[4,new Promise((function(e){return setTimeout(e,y)}))]:[3,2];case 1:a.sent(),a.label=2;case 2:a.trys.push([2,8,9,14]),e=c(S.current),a.label=3;case 3:return[4,e.next()];case 4:return(n=a.sent()).done?[3,7]:(t=n.value,r=t.component,o=t.time,u=void 0===o?1:o,d(r),[4,new Promise((function(e){return setTimeout(e,u)}))]);case 5:a.sent(),a.label=6;case 6:return[3,3];case 7:return[3,14];case 8:return i=a.sent(),l={error:i},[3,14];case 9:return a.trys.push([9,,12,13]),n&&!n.done&&(s=e.return)?[4,s.call(e)]:[3,11];case 10:a.sent(),a.label=11;case 11:return[3,13];case 12:if(l)throw l.error;return[7];case 13:return[7];case 14:return h&&x({}),[2]}}))}))}),[y,h]);r((function(){g()}),[g,w]);var P=t((function(){return v}),[v]);return o((function(){return P}),[P])}
***************************************************************************** */var u=function(){return(u=Object.assign||function(n){for(var e,t=1,r=arguments.length;t<r;t++)for(var o in e=arguments[t])Object.prototype.hasOwnProperty.call(e,o)&&(n[o]=e[o]);return n}).apply(this,arguments)};function i(n,e,t,r){return new(t||(t=Promise))((function(o,u){function i(n){try{c(r.next(n))}catch(n){u(n)}}function a(n){try{c(r.throw(n))}catch(n){u(n)}}function c(n){var e;n.done?o(n.value):(e=n.value,e instanceof t?e:new t((function(n){n(e)}))).then(i,a)}c((r=r.apply(n,e||[])).next())}))}function a(n,e){var t,r,o,u,i={label:0,sent:function(){if(1&o[0])throw o[1];return o[1]},trys:[],ops:[]};return u={next:a(0),throw:a(1),return:a(2)},"function"==typeof Symbol&&(u[Symbol.iterator]=function(){return this}),u;function a(u){return function(a){return function(u){if(t)throw new TypeError("Generator is already executing.");for(;i;)try{if(t=1,r&&(o=2&u[0]?r.return:u[0]?r.throw||((o=r.return)&&o.call(r),0):r.next)&&!(o=o.call(r,u[1])).done)return o;switch(r=0,o&&(u=[2&u[0],o.value]),u[0]){case 0:case 1:o=u;break;case 4:return i.label++,{value:u[1],done:!1};case 5:i.label++,r=u[1],u=[0];continue;case 7:u=i.ops.pop(),i.trys.pop();continue;default:if(!(o=i.trys,(o=o.length>0&&o[o.length-1])||6!==u[0]&&2!==u[0])){i=0;continue}if(3===u[0]&&(!o||u[1]>o[0]&&u[1]<o[3])){i.label=u[1];break}if(6===u[0]&&i.label<o[1]){i.label=o[1],o=u;break}if(o&&i.label<o[2]){i.label=o[2],i.ops.push(u);break}o[2]&&i.ops.pop(),i.trys.pop();continue}u=e.call(n,i)}catch(n){u=[6,n],r=0}finally{t=o=0}if(5&u[0])throw u[1];return{value:u[0]?u[1]:void 0,done:!0}}([u,a])}}}export default function(c){var l=this,s=c.framesOptions,f=c.startDelay,p=void 0===f?void 0:f,h=c.isLoop,v=void 0!==h&&h,b=n(null),y=b[0],d=b[1],m=s.length||0,w=e(s),g=t((function(n){return i(l,void 0,void 0,(function(){var e,t,r;return a(this,(function(o){switch(o.label){case 0:return e=n[0],t=n.slice(1),r=w.current.indexOf(e)+1,d(u(u({},e),{currentFrame:r})),[4,new Promise((function(n){return setTimeout(n,e.time)}))];case 1:return o.sent(),t.length?[4,g(t)]:[3,3];case 2:o.sent(),o.label=3;case 3:return[2]}}))}))}),[]),x=t((function(){return i(l,void 0,void 0,(function(){var n;return a(this,(function(e){switch(e.label){case 0:return n=w.current,p?[4,new Promise((function(n){return setTimeout(n,p)}))]:[3,2];case 1:e.sent(),e.label=2;case 2:return[4,g(n)];case 3:return e.sent(),v&&x(),[2]}}))}))}),[p,v,g]);r((function(){x()}),[x]);var O=t((function(){return(null==y?void 0:y.component)||null}),[y]);return o((function(){var n=(null!=y?y:{currentFrame:0}).currentFrame;return[O,n,m]}),[O,y,m])}

4

dist/index.js

@@ -1,2 +0,2 @@

"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react");
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),n=function(){return(n=Object.assign||function(e){for(var n,t=1,r=arguments.length;t<r;t++)for(var u in n=arguments[t])Object.prototype.hasOwnProperty.call(n,u)&&(e[u]=n[u]);return e}).apply(this,arguments)};
/*! *****************************************************************************

@@ -15,2 +15,2 @@ Copyright (c) Microsoft Corporation.

PERFORMANCE OF THIS SOFTWARE.
***************************************************************************** */function t(e,t,n,r){return new(n||(n=Promise))((function(o,u){function a(e){try{c(r.next(e))}catch(e){u(e)}}function i(e){try{c(r.throw(e))}catch(e){u(e)}}function c(e){var t;e.done?o(e.value):(t=e.value,t instanceof n?t:new n((function(e){e(t)}))).then(a,i)}c((r=r.apply(e,t||[])).next())}))}function n(e,t){var n,r,o,u,a={label:0,sent:function(){if(1&o[0])throw o[1];return o[1]},trys:[],ops:[]};return u={next:i(0),throw:i(1),return:i(2)},"function"==typeof Symbol&&(u[Symbol.iterator]=function(){return this}),u;function i(u){return function(i){return function(u){if(n)throw new TypeError("Generator is already executing.");for(;a;)try{if(n=1,r&&(o=2&u[0]?r.return:u[0]?r.throw||((o=r.return)&&o.call(r),0):r.next)&&!(o=o.call(r,u[1])).done)return o;switch(r=0,o&&(u=[2&u[0],o.value]),u[0]){case 0:case 1:o=u;break;case 4:return a.label++,{value:u[1],done:!1};case 5:a.label++,r=u[1],u=[0];continue;case 7:u=a.ops.pop(),a.trys.pop();continue;default:if(!(o=a.trys,(o=o.length>0&&o[o.length-1])||6!==u[0]&&2!==u[0])){a=0;continue}if(3===u[0]&&(!o||u[1]>o[0]&&u[1]<o[3])){a.label=u[1];break}if(6===u[0]&&a.label<o[1]){a.label=o[1],o=u;break}if(o&&a.label<o[2]){a.label=o[2],a.ops.push(u);break}o[2]&&a.ops.pop(),a.trys.pop();continue}u=t.call(e,a)}catch(e){u=[6,e],r=0}finally{n=o=0}if(5&u[0])throw u[1];return{value:u[0]?u[1]:void 0,done:!0}}([u,i])}}}function r(e){var t="function"==typeof Symbol&&Symbol.iterator,n=t&&e[t],r=0;if(n)return n.call(e);if(e&&"number"==typeof e.length)return{next:function(){return e&&r>=e.length&&(e=void 0),{value:e&&e[r++],done:!e}}};throw new TypeError(t?"Object is not iterable.":"Symbol.iterator is not defined.")}function o(e){if(!Symbol.asyncIterator)throw new TypeError("Symbol.asyncIterator is not defined.");var t,n=e[Symbol.asyncIterator];return n?n.call(e):(e=r(e),t={},o("next"),o("throw"),o("return"),t[Symbol.asyncIterator]=function(){return this},t);function o(n){t[n]=e[n]&&function(t){return new Promise((function(r,o){(function(e,t,n,r){Promise.resolve(r).then((function(t){e({value:t,done:n})}),t)})(r,o,(t=e[n](t)).done,t.value)}))}}}exports.default=function(r){var u=this,a=r.framesOptions,i=r.startDelay,c=void 0===i?void 0:i,s=r.isLoop,l=void 0!==s&&s,f=e.useState(null),y=f[0],b=f[1],p=e.useState({}),h=p[0],v=p[1],d=e.useRef(a),m=e.useCallback((function(){return t(u,void 0,void 0,(function(){var e,t,r,u,a,i,s,f,y;return n(this,(function(n){switch(n.label){case 0:return c?[4,new Promise((function(e){return setTimeout(e,c)}))]:[3,2];case 1:n.sent(),n.label=2;case 2:n.trys.push([2,8,9,14]),e=o(d.current),n.label=3;case 3:return[4,e.next()];case 4:return(t=n.sent()).done?[3,7]:(r=t.value,u=r.component,a=r.time,i=void 0===a?1:a,b(u),[4,new Promise((function(e){return setTimeout(e,i)}))]);case 5:n.sent(),n.label=6;case 6:return[3,3];case 7:return[3,14];case 8:return s=n.sent(),f={error:s},[3,14];case 9:return n.trys.push([9,,12,13]),t&&!t.done&&(y=e.return)?[4,y.call(e)]:[3,11];case 10:n.sent(),n.label=11;case 11:return[3,13];case 12:if(f)throw f.error;return[7];case 13:return[7];case 14:return l&&v({}),[2]}}))}))}),[c,l]);e.useEffect((function(){m()}),[m,h]);var w=e.useCallback((function(){return y}),[y]);return e.useMemo((function(){return w}),[w])};
***************************************************************************** */function t(e,n,t,r){return new(t||(t=Promise))((function(u,o){function a(e){try{c(r.next(e))}catch(e){o(e)}}function i(e){try{c(r.throw(e))}catch(e){o(e)}}function c(e){var n;e.done?u(e.value):(n=e.value,n instanceof t?n:new t((function(e){e(n)}))).then(a,i)}c((r=r.apply(e,n||[])).next())}))}function r(e,n){var t,r,u,o,a={label:0,sent:function(){if(1&u[0])throw u[1];return u[1]},trys:[],ops:[]};return o={next:i(0),throw:i(1),return:i(2)},"function"==typeof Symbol&&(o[Symbol.iterator]=function(){return this}),o;function i(o){return function(i){return function(o){if(t)throw new TypeError("Generator is already executing.");for(;a;)try{if(t=1,r&&(u=2&o[0]?r.return:o[0]?r.throw||((u=r.return)&&u.call(r),0):r.next)&&!(u=u.call(r,o[1])).done)return u;switch(r=0,u&&(o=[2&o[0],u.value]),o[0]){case 0:case 1:u=o;break;case 4:return a.label++,{value:o[1],done:!1};case 5:a.label++,r=o[1],o=[0];continue;case 7:o=a.ops.pop(),a.trys.pop();continue;default:if(!(u=a.trys,(u=u.length>0&&u[u.length-1])||6!==o[0]&&2!==o[0])){a=0;continue}if(3===o[0]&&(!u||o[1]>u[0]&&o[1]<u[3])){a.label=o[1];break}if(6===o[0]&&a.label<u[1]){a.label=u[1],u=o;break}if(u&&a.label<u[2]){a.label=u[2],a.ops.push(o);break}u[2]&&a.ops.pop(),a.trys.pop();continue}o=n.call(e,a)}catch(e){o=[6,e],r=0}finally{t=u=0}if(5&o[0])throw o[1];return{value:o[0]?o[1]:void 0,done:!0}}([o,i])}}}exports.default=function(u){var o=this,a=u.framesOptions,i=u.startDelay,c=void 0===i?void 0:i,l=u.isLoop,s=void 0!==l&&l,f=e.useState(null),p=f[0],h=f[1],v=a.length||0,b=e.useRef(a),d=e.useCallback((function(e){return t(o,void 0,void 0,(function(){var t,u,o;return r(this,(function(r){switch(r.label){case 0:return t=e[0],u=e.slice(1),o=b.current.indexOf(t)+1,h(n(n({},t),{currentFrame:o})),[4,new Promise((function(e){return setTimeout(e,t.time)}))];case 1:return r.sent(),u.length?[4,d(u)]:[3,3];case 2:r.sent(),r.label=3;case 3:return[2]}}))}))}),[]),y=e.useCallback((function(){return t(o,void 0,void 0,(function(){var e;return r(this,(function(n){switch(n.label){case 0:return e=b.current,c?[4,new Promise((function(e){return setTimeout(e,c)}))]:[3,2];case 1:n.sent(),n.label=2;case 2:return[4,d(e)];case 3:return n.sent(),s&&y(),[2]}}))}))}),[c,s,d]);e.useEffect((function(){y()}),[y]);var w=e.useCallback((function(){return(null==p?void 0:p.component)||null}),[p]);return e.useMemo((function(){var e=(null!=p?p:{currentFrame:0}).currentFrame;return[w,e,v]}),[w,p,v])};

2

package.json
{
"name": "react-use-presentation",
"version": "1.0.0",
"version": "1.1.0",
"description": "Create pure HTML (React enriched if you will) presentations.",

@@ -5,0 +5,0 @@ "author": "Olavo Parno",

61

README.md

@@ -11,2 +11,4 @@ <img align="right" alt="traffic" src="https://pv-badge.herokuapp.com/total.svg?repo_id=olavoparno-react-use-presentation"/>

[Preview with background video here!](https://codesandbox.io/s/react-use-presentation-with-bg-d7f7j)
---

@@ -26,3 +28,5 @@

![Example](./assets/readme.gif)
| Plain | Video BG |
| ------------------------------- | ---------------------------------- |
| ![Example](./assets/readme.gif) | ![Example](./assets/readme-bg.gif) |

@@ -44,3 +48,3 @@ ---

```tsx
const myFramesArray = [
export const myFramesArray = [
{

@@ -63,7 +67,8 @@ component: <div>First Frame with 1 second duration</div>,

```tsx
import * as react from 'react';\
import * as react from 'react';
import usePresentation from 'react-use-presentation';
import { myFramesArray1 } from './myFramesArray'
export default function App() {
const Presentation = usePresentation({ framesOptions: myFramesArray1 });
const [Presentation] = usePresentation({ framesOptions: myFramesArray1 });

@@ -79,7 +84,11 @@ return (

```tsx
import * as react from 'react';\
import * as react from 'react';
import usePresentation from 'react-use-presentation';
import { myFramesArray2 } from './myFramesArray'
export default function App() {
const DelayedPresentation = usePresentation({ framesOptions: myFramesArray2, startDelay: 1000 });
const [DelayedPresentation] = usePresentation({
framesOptions: myFramesArray2,
startDelay: 1000
});

@@ -95,7 +104,12 @@ return (

```tsx
import * as react from 'react';\
import * as react from 'react';
import usePresentation from 'react-use-presentation';
import { myFramesArray3 } from './myFramesArray'
export default function App() {
const DelayedAndLoopedPresentation = usePresentation({ framesOptions: myFramesArray3, startDelay: 1000, isLoop: true });
const [DelayedAndLoopedPresentation] = usePresentation({
framesOptions: myFramesArray3,
startDelay: 1000,
isLoop: true
});

@@ -108,15 +122,22 @@ return (

- To initialize multiple separated presentations:
- To initialize multiple separated presentations and with its current frame and length:
```tsx
import * as react from 'react';\
import * as react from 'react';
import usePresentation from 'react-use-presentation';
export default function App() {
const Presentation = usePresentation({ framesOptions: myFramesArray1 });
const DelayedPresentation = usePresentation({ framesOptions: myFramesArray2, startDelay: 1000 });
const DelayedAndLoopedPresentation = usePresentation({ framesOptions: myFramesArray3, startDelay: 1000, isLoop: true });
const [Presentation] = usePresentation({ framesOptions: myFramesArray1 });
const [DelayedPresentation] = usePresentation({ framesOptions: myFramesArray2, startDelay: 1000 });
const [DelayedAndLoopedPresentation, currentLoopFrame, loopFramesLength] = usePresentation({ framesOptions: myFramesArray3, startDelay: 1000, isLoop: true });
return (
<DelayedAndLoopedPresentation />
<>
<Presentation />
<DelayedPresentation />
<div>
<p>Current frame: {currentLoopFrame}/{loopFramesLength}</p>
<DelayedAndLoopedPresentation />
</div>
</>
)

@@ -149,6 +170,14 @@ }

- *Presentation*: Component<{}, {}, any> | null
- An array with 3 positions, described below:
> The *Presentation* component name is purely arbitrary i.e. *MyLittleComponentPresentation* will do just fine.
1. The very animation component;
2. The current position of the frame (1 based);
3. The total quantity of frames;
> As the return is an array you may name each array position in an arbitrary way, e.g.:
```tsx
const [MyLittleComponent, currentFrameLittle, totalLengthLittle] = usePresentation();
```
---

@@ -155,0 +184,0 @@

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc