Skip to content

Allow variable amount of blur #3

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
wants to merge 7 commits into
base: master
Choose a base branch
from
Open

Allow variable amount of blur #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
75ab3e5
Add variable blur prop to Img
Sorgrum Jan 10, 2019
3d8792a
Fix typo in PropTypes
Sorgrum Jan 10, 2019
36e1369
Stop blurAmount from passing through to html element
Sorgrum Jan 10, 2019
93ea65a
Change blurAmount propType to string (pixel amount of blur)
Sorgrum Jan 10, 2019
67e6986
Merge branch 'master' of https://github.com/yosbelms/react-progressiv…
Sorgrum Feb 4, 2019
c11d45a
remove aspectRatio from props object
Sorgrum Feb 4, 2019
fb6032f
bump version
Sorgrum Feb 4, 2019
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
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "react-progressive-loader",
"version": "0.2.1",
"version": "0.2.3",
"description": "Utility to load images and React components progressively, and get code splitting for free",
"repository": "https://github.com/yosbelms/react-progressive-loader.git",
"main": "lib/index.js",
Expand Down
20 changes: 14 additions & 6 deletions src/img.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,10 +18,12 @@ const imgStyle = {
transition: 'opacity 1s linear'
}

const imgPlaceholderStyle = {
...imgStyle,
filter: 'blur(50px)',
transform: 'scale(1)'
const imgPlaceholderStyle = blurAmount => {
return {
...imgStyle,
filter: `blur(${blurAmount})`,
transform: 'scale(1)'
};
}

const wrapperStyle = {
Expand All @@ -37,22 +39,27 @@ const backgroundStyle = {
}

const defaultBgColor = '#f6f6f6'
const defaultBlurAmount = '50px'

export function Img(props: HTMLAttributes<any> & {
src: string
placeholderSrc?: string
bgColor?: string
aspectRatio: number
loadOnScreen?: boolean
blurAmount?: number
}) {
const { src, placeholderSrc } = props
const wrapperProps = { ...props }
delete wrapperProps.src
delete wrapperProps.placeholderSrc
delete wrapperProps.bgColor
delete wrapperProps.aspectRatio
delete wrapperProps.loadOnScreen
delete wrapperProps.blurAmount

const bgColor = props.bgColor || defaultBgColor
const blurAmount = props.blurAmount || defaultBlurAmount

return (
<Bare
Expand All @@ -75,7 +82,7 @@ export function Img(props: HTMLAttributes<any> & {
<If test={placeholderSrc && cmp.state.placeholderLoaded} then={() =>
<img key='placeholder'
src={placeholderSrc}
style={{ ...imgPlaceholderStyle, opacity: cmp.state.loaded ? 0 : 1 }}
style={{ ...imgPlaceholderStyle(blurAmount), opacity: cmp.state.loaded ? 0 : 1 }}
/>
} />

Expand Down Expand Up @@ -103,7 +110,8 @@ export function Img(props: HTMLAttributes<any> & {
src: PropsTypes.string.isRequired,
placeholderSrc: PropsTypes.string,
bgColor: PropsTypes.string,
loadOnScreen: PropsTypes.bool
loadOnScreen: PropsTypes.bool,
blurAmount: PropsTypes.string
}

function constructor(cmp) {
Expand Down