Skip to content

Remove styled components #70

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
doomjar wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Remove styled components #70

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
d017d8b
replace styled components with inline styles
Jul 16, 2026
a0126d1
remove styled components reference from jsdoc
Jul 16, 2026
294a725
remove styled components as dependency
Jul 16, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 1 addition & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,8 +59,7 @@
},
"peerDependencies": {
"react": ">=16.8",
"react-dom": ">=16.8",
"styled-components": ">=5.X"
"react-dom": ">=16.8"
},
"devDependencies": {
"@babel/core": "^7.23.0",
Expand Down
22 changes: 7 additions & 15 deletions src/components/ImageStage/components/Image/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@ import {
} from '../../utils';
import { useGesture } from 'react-use-gesture';
import React, { useEffect, useRef, useState } from 'react';
import styled, { AnyStyledComponent } from 'styled-components';
import type { ImagesListItem } from '../../../../types/ImagesList';

const defaultImageTransform = {
Expand Down Expand Up @@ -285,8 +284,7 @@ const Image = ({
});

return (
<AnimatedImage
$inline={inline}
<animated.img
className="lightbox-image"
draggable="false"
onClick={(e: React.MouseEvent<HTMLImageElement>) => {
Expand All @@ -300,12 +298,17 @@ const Image = ({
}}
ref={imageRef}
style={{
...imgStyleProp,
height: 'auto',
maxHeight: pagerHeight,
maxWidth: '100%',
touchAction: !inline ? 'none' : 'pan-y',
...imgStyleProp,
transform: to(
[scale, translateX, translateY],
(s, x, y) => `translate(${x}px, ${y}px) scale(${s})`,
),
userSelect: 'none',
width: 'auto',
...(isCurrentImage && { willChange: 'transform' }),
}}
// Include any valid img html attributes provided in the <Lightbox /> images prop
Expand All @@ -317,14 +320,3 @@ const Image = ({
Image.displayName = 'Image';

export default Image;

const AnimatedImage = styled(animated.img as AnyStyledComponent)`
width: auto;
height: auto;
max-width: 100%;
user-select: none;
touch-action: ${({ $inline }) => (!$inline ? 'none' : 'pan-y')};
::selection {
background: none;
}
`;
99 changes: 42 additions & 57 deletions src/components/ImageStage/components/ImagePager/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@ import { animated, useSprings } from '@react-spring/web';
import { useGesture } from 'react-use-gesture';
import Image from '../Image';
import React, { useEffect, useRef, useState } from 'react';
import styled, { AnyStyledComponent } from 'styled-components';
import type { ImagesList } from '../../../../types/ImagesList';

type IImagePager = {
Expand Down Expand Up @@ -201,10 +200,9 @@ const ImagePager = ({
);

return (
<ImagePagerContainer>
<div style={{ height: '100%', width: '100%' }}>
{pagerSprings.map(({ display, x }, i) => (
<AnimatedImagePager
$inline={inline}
<animated.span
{...bind()}
className="lightbox-image-pager"
key={i}
Expand All @@ -219,20 +217,51 @@ const ImagePager = ({
}}
role="presentation"
style={{
alignItems: 'center',
bottom: 0,
display,
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
left: 0,
position: 'absolute',
right: 0,
top: 0,
touchAction: !inline ? 'none' : 'pan-y',
transform: x.to(
(xInterp: number) => `translateX(${xInterp}px)`,
),
width: '100%',
willChange: 'transform',
}}
>
<PagerContentWrapper>
<PagerInnerContentWrapper>
<ImageContainer
$inline={inline}
<div
style={{
display: 'flex',
justifyContent: 'center',
width: '100%',
}}
>
<div
style={{
alignItems: 'center',
display: 'flex',
justifyContent: 'center',
}}
>
<div
onClick={(e) => {
e.stopPropagation();
e.nativeEvent.stopImmediatePropagation();
}}
style={{
display: 'flex',
justifyContent: 'center',
position: 'relative',
touchAction: !inline ? 'none' : 'pan-y',
userSelect: 'none',
width: '100%',
}}
>
<Image
imgProps={images[i]}
Expand All @@ -244,59 +273,15 @@ const ImagePager = ({
singleClickToZoom={singleClickToZoom}
/>
{renderImageOverlay()}
</ImageContainer>
</PagerInnerContentWrapper>
</PagerContentWrapper>
</AnimatedImagePager>
</div>
</div>
</div>
</animated.span>
))}
</ImagePagerContainer>
</div>
);
};

ImagePager.displayName = 'ImagePager';

export default ImagePager;

const ImagePagerContainer = styled.div`
height: 100%;
width: 100%;
`;

const PagerInnerContentWrapper = styled.div`
display: flex;
justify-content: center;
align-items: center;
`;

const PagerContentWrapper = styled.div`
width: 100%;
display: flex;
justify-content: center;
`;

const AnimatedImagePager = styled(animated.span as AnyStyledComponent)<{
$inline: boolean;
}>`
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
height: 100%;
width: 100%;
will-change: transform;
touch-action: ${({ $inline }) => (!$inline ? 'none' : 'pan-y')};
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
`;

const ImageContainer = styled.div<{ $inline: boolean }>`
position: relative;
touch-action: ${({ $inline }) => (!$inline ? 'none' : 'pan-y')};
user-select: none;
display: flex;
justify-content: center;
width: 100%;
`;
35 changes: 13 additions & 22 deletions src/components/ImageStage/components/SSRImagePager/SSRImagePager.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import type { ImagesList } from '../../../../types/ImagesList';
import styled, { css } from 'styled-components';
import * as React from 'react';

type ISSRImagePagerProps = {
Expand All @@ -9,36 +8,28 @@ type ISSRImagePagerProps = {

const SSRImagePager = ({ currentIndex, images }: ISSRImagePagerProps) => {
return (
<ImagePagerContainer>
<div style={{ height: 'inherit', width: '100%' }}>
{images.map(({ alt, src }, i) => {
const isCurrentImage = i === currentIndex;
return (
<Image
$isCurrentImage={i === currentIndex}
<img
alt={alt}
key={`${alt}-${src}-${i}`}
src={src}
style={{
...(!isCurrentImage && {
display: 'none',
visibility: 'hidden',
}),
height: '100%',
objectFit: 'contain',
width: '100%',
}}
/>
);
})}
</ImagePagerContainer>
</div>
);
};

export default SSRImagePager;

const ImagePagerContainer = styled.div`
width: 100%;
height: inherit;
`;

const Image = styled.img<{ $isCurrentImage: boolean }>`
${({ $isCurrentImage }) =>
!$isCurrentImage &&
css`
visibility: hidden;
display: none;
`}
height:100%;
width: 100%;
object-fit: contain;
`;
22 changes: 10 additions & 12 deletions src/components/ImageStage/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import ImagePager from './components/ImagePager';
import React from 'react';
import styled from 'styled-components';
import useRefSize from './utils/useRefSize';
import type { ImagesList } from '../../types/ImagesList';
import SSRImagePager from './components/SSRImagePager/SSRImagePager';
Expand Down Expand Up @@ -57,10 +56,18 @@ const ImageStage = ({
useRefSize();

return (
<ImageStageContainer
<div
className={className}
data-testid="lightbox-image-stage"
ref={containerRef}
style={{
alignItems: 'center',
display: 'flex',
height: '100%',
justifyContent: 'center',
position: 'relative',
width: '100%',
}}
>
{renderPrevButton({ canPrev })}
{containerWidth ? (
Expand All @@ -80,17 +87,8 @@ const ImageStage = ({
<SSRImagePager currentIndex={currentIndex} images={images} />
) : null}
{renderNextButton({ canNext })}
</ImageStageContainer>
</div>
);
};

export default ImageStage;

const ImageStageContainer = styled.div`
position: relative;
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
`;
29 changes: 14 additions & 15 deletions src/components/PageContainer/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import React from 'react';
import { useTransition, animated, config } from '@react-spring/web';
import styled, { AnyStyledComponent } from 'styled-components';

type IPageContainerProps = {
/** All child components of Lightbox */
Expand Down Expand Up @@ -42,30 +41,30 @@ const PageContainer = ({
{transitions(
(animatedStyles, item) =>
item && (
<AnimatedPageContainer
<animated.div
className={`lightbox-container${
className ? ` ${className}` : ''
}`}
data-testid="lightbox-container"
style={{ ...animatedStyles, ...style }}
style={{
bottom: 0,
display: 'flex',
flexDirection: 'column',
left: 0,
position: 'fixed',
right: 0,
top: 0,
zIndex: 400,
...animatedStyles,
...style,
}}
>
{children}
</AnimatedPageContainer>
</animated.div>
),
)}
</>
);
};

export default PageContainer;

const AnimatedPageContainer = styled(animated.div as AnyStyledComponent)`
display: flex;
flex-direction: column;
position: fixed;
z-index: 400;
top: 0;
bottom: 0;
left: 0;
right: 0;
`;
1 change: 0 additions & 1 deletion src/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,6 @@ type ILightboxProps = {
* Built with:
* @see https://github.com/react-spring/react-use-gesture
* @see https://github.com/react-spring/react-spring
* @see https://github.com/styled-components/styled-components
*/
const Lightbox = ({
className = '',
Expand Down