evenchange4 / React Progressive Bg Image
Licence: mit
🖼 Medium style progressive background image.
Stars: ✭ 226
Programming Languages
javascript
184084 projects - #8 most used programming language
Labels
Projects that are alternatives of or similar to React Progressive Bg Image
Bancointer
Redesign of Banco Inter's Internet Banking
Stars: ✭ 216 (-4.42%)
Mutual labels: styled-components
React Landing Page
🛬 Everything you need for a modern landing page, built with React & Styled Components
Stars: ✭ 193 (-14.6%)
Mutual labels: styled-components
Styled React Boilerplate
Minimal & Modern boilerplate for building apps with React & styled-components
Stars: ✭ 198 (-12.39%)
Mutual labels: styled-components
Styled Components Spacing
Responsive margin and padding components for styled-components 💅.
Stars: ✭ 209 (-7.52%)
Mutual labels: styled-components
Elm Styled
Styling your Html Elements with typed Css 💅
Stars: ✭ 180 (-20.35%)
Mutual labels: styled-components
Next Blog Firestore
Example of blog built with React, Next.js, Firebase Firestore, Styled-Component, Mobx State Tree and other cool technologies
Stars: ✭ 219 (-3.1%)
Mutual labels: styled-components
Lerna Yarn Workspaces Monorepo
🐉 A Monorepo with multiple packages and a shared build, test, and release process.
Stars: ✭ 201 (-11.06%)
Mutual labels: styled-components
Styled Loaders
Loaders Built with Preact and Styled Components
Stars: ✭ 212 (-6.19%)
Mutual labels: styled-components
Css In Js
Autocomplete React Native / JS Styles and converting plain CSS to JS styles
Stars: ✭ 192 (-15.04%)
Mutual labels: styled-components
Styled Bootstrap Components
The bootstrap components made with styled-components 💅
Stars: ✭ 196 (-13.27%)
Mutual labels: styled-components
Styled Theme
Extensible theming system for styled-components 💅
Stars: ✭ 183 (-19.03%)
Mutual labels: styled-components
Styled Components Vs Emotion
a short doc comparing the popular CSS-in-JS libraries styled-components and emotion
Stars: ✭ 204 (-9.73%)
Mutual labels: styled-components
Govuk React
An implementation of the GOV.UK Design System in React using CSSinJS
Stars: ✭ 219 (-3.1%)
Mutual labels: styled-components
Styled Components Grid
A responsive grid components for styled-components.
Stars: ✭ 218 (-3.54%)
Mutual labels: styled-components
react-progressive-bg-image
Medium style progressive background image for React based on Styled-components.
Demo
- https://react-progressive-bg-image.netlify.com/
- Responsive example: https://michaelhsu.tw/ [Source code]
- Img tag example: https://mcslite.netlify.com/ [Source code]
Further Reading:
Installation
$ yarn add react-progressive-bg-image styled-components
Requirements
-
node >= 9.4.0
-
yarn >= 1.3.2
-
react
^16.0.0
, -
styled-components
^3
Usage
Case 1: Inline-style
Remind: May need to setup autoprefixer in your project.
import ProgressiveImage from 'react-progressive-bg-image';
<ProgressiveImage
src={image1}
placeholder={image1X60}
style={{
height: 600,
backgroundSize: 'contain',
backgroundPosition: 'center center',
}}
/>;
Case 2: With Styled-components
import styled from 'styled-components';
import ProgressiveImage from 'react-progressive-bg-image';
const StyledProgressiveImage = styled(ProgressiveImage)`
height: 600px;
background-size: contain;
background-position: center center;
`;
<StyledProgressiveImage
src={IMAGE}
placeholder={IMAGEX60}
transition="all 1s linear"
/>;
Property
Prop | Type | Required | Description |
---|---|---|---|
src |
string | yes | Origin image |
placeholder |
string | yes | Small image (Suggest inline base64) |
opacity |
number | default: 0.5 | |
blur |
number | default: 20 | |
scale |
number | default: 1 | |
transition |
string | default: 'opacity 0.3s linear' | |
component |
string | default: 'div' |
Test
$ yarn run format
$ yarn run eslint
$ yarn run test:watch
Github release / NPM release
$ npm version patch
$ git push
Inspiration
CONTRIBUTING
- ⇄ Pull requests and ★ Stars are always welcome.
- For bugs and feature requests, please create an issue.
- Pull requests must be accompanied by passing automated tests (
$ yarn run test
).
CHANGELOG
LICENSE
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].