Skip to content

Commit

Permalink
add image props for customized React component
Browse files Browse the repository at this point in the history
  • Loading branch information
@chilijung
chilijung committed Mar 7, 2018
1 parent 64b8c0c commit 276eb58
Show file tree
Hide file tree
Showing 5 changed files with 180 additions and 24 deletions.
41 changes: 41 additions & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,46 @@ class Demo extends React.Component {
}
```

## Advanced

You might want to customized such as `<div/>` as your final view, instead of `<img/>` tags

you can use `image` prop to replace any React element as you wish!

For example, using `styled-components`:


```js
import styled from 'styled-components';

const PreviewImg = styled.div`
background-image: url(${props => props.src});
width: 100%;
height: 300px;
background-size: contain;
background-repeat: no-repeat;
`;

class Demo extends React.Component {
...

render() {
const {value} = this.props;
return (
<div>
<ImageLoader
src={value}
image={props => <PreviewImg {...props}/>} // change to your customized component
loading={() => <div>Loading...</div>}
error={() => <div>Error</div>}
/>
</div>
);
}
}
```


## Props

| Name | Type | Default | Description |
Expand All @@ -58,6 +98,7 @@ class Demo extends React.Component {
| onError | (err: Event) => void | null | This function will be called when image is failed |
| loading | () => React.Element<*> | null | Return a React element that will show when image is loading |
| error | () => React.Element<*> | null | Return a React element that will show when image is crashed |
| image | ({src: string}) => React.Element<*> | null | Final result will render to this customized React element, if you don't assign this props default image will render into `<img src={src}/>` |

## Start example server

Expand Down
10 changes: 10 additions & 0 deletions docs/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,16 @@
import React from 'react';
import ReactDOM from 'react-dom';
import styled from 'styled-components';
import ImageLoader from '../src';

const PreviewImg = styled.div`
background-image: url(${props => props.src});
width: 100%;
height: 300px;
background-size: contain;
background-repeat: no-repeat;
`;

class Demo extends React.Component {
constructor(props) {
super(props);
Expand Down Expand Up @@ -30,6 +39,7 @@ class Demo extends React.Component {
{value && (
<ImageLoader
src={value}
image={props => <PreviewImg {...props}/>}
loading={() => <div>Loading...</div>}
error={() => <div>Error</div>}
/>
Expand Down
27 changes: 14 additions & 13 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,33 +16,34 @@
""
],
"devDependencies": {
"flow-bin": "^0.66.0",
"flow-copy-source": "^1.3.0",
"eslint": "^4.18.2",
"eslint-plugin-flowtype": "^2.46.1",
"eslint-plugin-react": "^6.2.0",
"babel-eslint": "^8.2.2",
"precommit-hook-eslint": "^3.0.0",
"babel-cli": "^6.14.0",
"babel-core": "^6.14.0",
"babel-eslint": "^8.2.2",
"babel-loader": "^7.1.3",
"babel-preset-flow": "^6.23.0",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"babel-runtime": "^6.11.6",
"cross-env": "^5.1.3",
"rimraf": "^2.5.4",
"jest": "^22.4.2",
"react-addons-test-utils": "^15.6.0",
"enzyme": "^2.4.1",
"eslint": "^4.18.2",
"eslint-plugin-flowtype": "^2.46.1",
"eslint-plugin-react": "^6.2.0",
"flow-bin": "^0.66.0",
"flow-copy-source": "^1.3.0",
"git-directory-deploy": "^1.5.1",
"jest": "^22.4.2",
"mocha": "^3.2.0",
"ncp": "^2.0.0",
"precommit-hook-eslint": "^3.0.0",
"react": "^16.2.0",
"react-addons-test-utils": "^15.6.0",
"react-dom": "^16.2.0",
"rimraf": "^2.5.4",
"styled-components": "^3.2.0",
"webpack": "^4.0.1",
"webpack-cli": "^2.0.10",
"webpack-dev-server": "^3.1.0",
"git-directory-deploy": "^1.5.1",
"ncp": "^2.0.0"
"webpack-dev-server": "^3.1.0"
},
"scripts": {
"build:flow": "flow-copy-source -v -i '**/test/**' src lib",
Expand Down
5 changes: 4 additions & 1 deletion src/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ type Props = {
src: string,
onLoad?: (img: Image) => void,
onError?: (err: Event) => void,
image?: ({src: string}) => React.Element<*>,
loading?: () => React.Element<*>,
error?: (err: Event) => React.Element<*>
}
Expand Down Expand Up @@ -73,13 +74,15 @@ export default class ImageLoader extends React.Component<Props, State> {
}

render() {
const {loading, error} = this.props;
const {loading, error, image} = this.props;
const {src, isLoading, isError, errMsg} = this.state;

if (loading && isLoading) {
return loading();
} else if (error && isError && errMsg) {
return error(errMsg);
} else if (src && image) {
return image({src});
} else if (src) {
return <img {...this.props} src={src}/>
}
Expand Down
121 changes: 111 additions & 10 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -990,6 +990,14 @@ babel-plugin-transform-strict-mode@^6.24.1:
babel-runtime "^6.22.0"
babel-types "^6.24.1"

[email protected]:
version "6.23.0"
resolved "https://registry.yarnpkg.com/babel-polyfill/-/babel-polyfill-6.23.0.tgz#8364ca62df8eafb830499f699177466c3b03499d"
dependencies:
babel-runtime "^6.22.0"
core-js "^2.4.0"
regenerator-runtime "^0.10.0"

babel-polyfill@^6.26.0:
version "6.26.0"
resolved "https://registry.yarnpkg.com/babel-polyfill/-/babel-polyfill-6.26.0.tgz#379937abc67d7895970adc621f284cd966cf2153"
Expand Down Expand Up @@ -1374,6 +1382,13 @@ buffer@^4.3.0:
ieee754 "^1.1.4"
isarray "^1.0.0"

buffer@^5.0.3:
version "5.1.0"
resolved "https://registry.yarnpkg.com/buffer/-/buffer-5.1.0.tgz#c913e43678c7cb7c8bd16afbcddb6c5505e8f9fe"
dependencies:
base64-js "^1.0.2"
ieee754 "^1.1.4"

builtin-modules@^1.0.0:
version "1.1.1"
resolved "https://registry.yarnpkg.com/builtin-modules/-/builtin-modules-1.1.1.tgz#270f076c5a72c02f5b65a47df94c5fe3a278892f"
Expand Down Expand Up @@ -1474,7 +1489,7 @@ center-align@^0.1.1:
align-text "^0.1.3"
lazy-cache "^1.0.3"

chalk@^1.0.0, chalk@^1.1.1, chalk@^1.1.3:
chalk@1.1.3, chalk@^1.0.0, chalk@^1.1.1, chalk@^1.1.3:
version "1.1.3"
resolved "https://registry.yarnpkg.com/chalk/-/chalk-1.1.3.tgz#a8115c55e4a702fe4d150abd3872822a7e09fc98"
dependencies:
Expand Down Expand Up @@ -1929,6 +1944,10 @@ crypto-browserify@^3.11.0:
randombytes "^2.0.0"
randomfill "^1.0.3"

css-color-keywords@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/css-color-keywords/-/css-color-keywords-1.0.0.tgz#fea2616dc676b2962686b3af8dbdbe180b244e05"

css-select@~1.2.0:
version "1.2.0"
resolved "https://registry.yarnpkg.com/css-select/-/css-select-1.2.0.tgz#2b3a110539c5355f1cd8d314623e870b121ec858"
Expand All @@ -1938,6 +1957,14 @@ css-select@~1.2.0:
domutils "1.5.1"
nth-check "~1.0.1"

css-to-react-native@^2.0.3:
version "2.1.2"
resolved "https://registry.yarnpkg.com/css-to-react-native/-/css-to-react-native-2.1.2.tgz#c06d628467ef961c85ec358a90f3c87469fb0095"
dependencies:
css-color-keywords "^1.0.0"
fbjs "^0.8.5"
postcss-value-parser "^3.3.0"

[email protected]:
version "2.1.0"
resolved "https://registry.yarnpkg.com/css-what/-/css-what-2.1.0.tgz#9467d032c38cfaefb9f2d79501253062f87fa1bd"
Expand Down Expand Up @@ -2637,7 +2664,7 @@ external-editor@^1.1.0:
spawn-sync "^1.0.15"
tmp "^0.0.29"

external-editor@^2.0.4, external-editor@^2.1.0:
external-editor@^2.0.1, external-editor@^2.0.4, external-editor@^2.1.0:
version "2.1.0"
resolved "https://registry.yarnpkg.com/external-editor/-/external-editor-2.1.0.tgz#3d026a21b7f95b5726387d4200ac160d372c3b48"
dependencies:
Expand Down Expand Up @@ -2702,7 +2729,7 @@ fb-watchman@^2.0.0:
dependencies:
bser "^2.0.0"

fbjs@^0.8.16:
fbjs@^0.8.16, fbjs@^0.8.5, fbjs@^0.8.9:
version "0.8.16"
resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.16.tgz#5e67432f550dc41b572bf55847b8aca64e5337db"
dependencies:
Expand Down Expand Up @@ -3366,6 +3393,10 @@ [email protected]:
version "4.2.1"
resolved "https://registry.yarnpkg.com/hoek/-/hoek-4.2.1.tgz#9634502aa12c445dd5a7c5734b572bb8738aacbb"

hoist-non-react-statics@^1.2.0:
version "1.2.0"
resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-1.2.0.tgz#aa448cf0986d55cc40773b17174b7dd066cb7cfb"

home-or-tmp@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/home-or-tmp/-/home-or-tmp-2.0.0.tgz#e36c3f2d2cae7d746a857e38d18d5f32a7882db8"
Expand Down Expand Up @@ -3530,6 +3561,24 @@ ini@^1.3.4, ini@~1.3.0:
version "1.3.5"
resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.5.tgz#eee25f56db1c9ec6085e0c22778083f596abf927"

[email protected]:
version "3.0.6"
resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-3.0.6.tgz#e04aaa9d05b7a3cb9b0f407d04375f0447190347"
dependencies:
ansi-escapes "^1.1.0"
chalk "^1.0.0"
cli-cursor "^2.1.0"
cli-width "^2.0.0"
external-editor "^2.0.1"
figures "^2.0.0"
lodash "^4.3.0"
mute-stream "0.0.7"
run-async "^2.2.0"
rx "^4.1.0"
string-width "^2.0.0"
strip-ansi "^3.0.0"
through "^2.3.6"

inquirer@^1.0.2:
version "1.2.3"
resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-1.2.3.tgz#4dec6f32f37ef7bb0b2ed3f1d1a5c3f545074918"
Expand Down Expand Up @@ -4890,14 +4939,14 @@ [email protected]:
version "0.0.8"
resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.8.tgz#857fcabfc3397d2625b8228262e86aa7a011b05d"

[email protected], minimist@^1.1.0, minimist@^1.1.1, minimist@^1.1.3, minimist@^1.2.0:
version "1.2.0"
resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.0.tgz#a35008b20f41383eec1fb914f4cd5df79a264284"

minimist@^0.1.0:
version "0.1.0"
resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.1.0.tgz#99df657a52574c21c9057497df742790b2b4c0de"

minimist@^1.1.0, minimist@^1.1.1, minimist@^1.1.3, minimist@^1.2.0:
version "1.2.0"
resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.0.tgz#a35008b20f41383eec1fb914f4cd5df79a264284"

minimist@~0.0.1:
version "0.0.10"
resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.10.tgz#de3f98543dbf96082be48ad1a0c7cda836301dcf"
Expand Down Expand Up @@ -5035,6 +5084,13 @@ [email protected]:
version "0.1.8"
resolved "https://registry.yarnpkg.com/node-dir/-/node-dir-0.1.8.tgz#55fb8deb699070707fb67f91a460f0448294c77d"

[email protected]:
version "1.6.3"
resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-1.6.3.tgz#dc234edd6489982d58e8f0db4f695029abcd8c04"
dependencies:
encoding "^0.1.11"
is-stream "^1.0.1"

node-fetch@^1.0.1:
version "1.7.3"
resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-1.7.3.tgz#980f6f72d85211a5347c6b2bc18c5b84c3eb47ef"
Expand Down Expand Up @@ -5276,6 +5332,24 @@ onetime@^2.0.0:
dependencies:
mimic-fn "^1.0.0"

opencollective@^1.0.3:
version "1.0.3"
resolved "https://registry.yarnpkg.com/opencollective/-/opencollective-1.0.3.tgz#aee6372bc28144583690c3ca8daecfc120dd0ef1"
dependencies:
babel-polyfill "6.23.0"
chalk "1.1.3"
inquirer "3.0.6"
minimist "1.2.0"
node-fetch "1.6.3"
opn "4.0.2"

[email protected]:
version "4.0.2"
resolved "https://registry.yarnpkg.com/opn/-/opn-4.0.2.tgz#7abc22e644dff63b0a96d5ab7f2790c0f01abc95"
dependencies:
object-assign "^4.0.1"
pinkie-promise "^2.0.0"

opn@^5.1.0:
version "5.2.0"
resolved "https://registry.yarnpkg.com/opn/-/opn-5.2.0.tgz#71fdf934d6827d676cecbea1531f95d354641225"
Expand Down Expand Up @@ -5579,6 +5653,10 @@ posix-character-classes@^0.1.0:
version "0.1.1"
resolved "https://registry.yarnpkg.com/posix-character-classes/-/posix-character-classes-0.1.1.tgz#01eac0fe3b5af71a2a6c02feabb8c1fef7e00eab"

postcss-value-parser@^3.3.0:
version "3.3.0"
resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-3.3.0.tgz#87f38f9f18f774a4ab4c8a232f5c5ce8872a9d15"

precommit-hook-eslint@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/precommit-hook-eslint/-/precommit-hook-eslint-3.0.0.tgz#9071feb34c0d5206fdfa550d526e6e26120db70a"
Expand Down Expand Up @@ -5650,7 +5728,7 @@ promise@^7.1.1:
dependencies:
asap "~2.0.3"

prop-types@^15.5.10, prop-types@^15.6.0:
prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.6.0:
version "15.6.1"
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.1.tgz#36644453564255ddda391191fb3a125cbdf654ca"
dependencies:
Expand Down Expand Up @@ -5906,7 +5984,7 @@ regenerate@^1.2.1:
version "1.3.3"
resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.3.3.tgz#0c336d3980553d755c39b586ae3b20aa49c82b7f"

regenerator-runtime@^0.10.5:
regenerator-runtime@^0.10.0, regenerator-runtime@^0.10.5:
version "0.10.5"
resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.10.5.tgz#336c3efc1220adcedda2c9fab67b5a7955a33658"

Expand Down Expand Up @@ -6710,6 +6788,29 @@ strip-json-comments@~2.0.1:
version "2.0.1"
resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a"

styled-components@^3.2.0:
version "3.2.0"
resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-3.2.0.tgz#5e063656783a66f6bf411153fcfe994572f3e848"
dependencies:
buffer "^5.0.3"
css-to-react-native "^2.0.3"
fbjs "^0.8.9"
hoist-non-react-statics "^1.2.0"
is-plain-object "^2.0.1"
opencollective "^1.0.3"
prop-types "^15.5.4"
stylis "^3.4.10"
stylis-rule-sheet "^0.0.8"
supports-color "^3.2.3"

stylis-rule-sheet@^0.0.8:
version "0.0.8"
resolved "https://registry.yarnpkg.com/stylis-rule-sheet/-/stylis-rule-sheet-0.0.8.tgz#b0d0a126c945b1f3047447a3aae0647013e8d166"

stylis@^3.4.10:
version "3.4.10"
resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.4.10.tgz#a135cab4b9ff208e327fbb5a6fde3fa991c638ee"

[email protected]:
version "3.1.2"
resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-3.1.2.tgz#72a262894d9d408b956ca05ff37b2ed8a6e2a2d5"
Expand All @@ -6720,7 +6821,7 @@ supports-color@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7"

supports-color@^3.1.2:
supports-color@^3.1.2, supports-color@^3.2.3:
version "3.2.3"
resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-3.2.3.tgz#65ac0504b3954171d8a64946b2ae3cbb8a5f54f6"
dependencies:
Expand Down

0 comments on commit 276eb58

Please sign in to comment.