You're Invited:Meet the Socket Team at RSAC and BSidesSF 2026, March 23–26.RSVP
Socket
Book a DemoSign in
Socket

@times-stories/page

Package Overview
Dependencies
Maintainers
1
Versions
5
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@times-stories/page - npm Package Compare versions

Comparing version
1.0.4
to
1.0.6
+5
-4
package.json
{
"name": "@times-stories/page",
"version": "1.0.4",
"main": "src/index.js",
"module": "src/index.js",
"version": "1.0.6",
"main": "lib/index.js",
"module": "lib/index.js",
"dev": "src/index.js",
"scripts": {

@@ -23,3 +24,3 @@ "lint": "eslint .",

},
"gitHead": "3223cc3fd1e029d8c79010ac53cb9d8111464676"
"gitHead": "eab2c93feda8daf0f77da24ecc71ca00aec5efe8"
}
import React from "react";
import StoryContext from "@times-stories/context";
import style from "./style.scss";
export const Page = ({
pageIndex,
onInbound = () => {},
onActive = () => {},
onOutbound = () => {},
children
}) => (
<StoryContext.Consumer>
{({
activePage,
outboundPage,
inboundPage,
isMuted,
withAnimations,
handlers
}) => {
const isActive = pageIndex === activePage;
const isOutbound = pageIndex === outboundPage;
const isInbound = pageIndex === inboundPage;
const isUpcoming =
pageIndex === activePage + 1 || pageIndex === activePage - 1;
if (isInbound) onInbound();
if (isActive) onActive();
if (isOutbound) onOutbound();
return (
<div
className={[style.page, withAnimations && style.withAnimations].join(
" "
)}
style={{
opacity: isActive ? 1 : 0,
pointerEvents: isActive ? "initial" : "none"
}}
>
{children({
pageIndex,
isActive,
isOutbound,
isInbound,
isUpcoming,
isMuted,
withAnimations,
handlers
})}
</div>
);
}}
</StoryContext.Consumer>
);
export default Page;
.page {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
&.withAnimations {
transition: opacity 0.4s ease;
}
}