| import React, { Component } from "react"; | |
| import "../App.css"; | |
| import images from "../helper/images"; | |
| import ImageCard from "./ImageCard"; | |
| class App extends Component { | |
| renderImages() { | |
| return ( | |
| <div className="image-list"> | |
| {images.map(data => ( |
| import React, { Component, Fragment } from 'react'; | |
| import ContentLoader from 'react-content-loader'; | |
| class ImageLoader extends Component { | |
| render() { | |
| const { size: { height, width } } = this.props; | |
| return ( | |
| <Fragment> | |
| <ContentLoader |
| import React, { Component, Fragment } from "react"; | |
| import ImageLoader from "../ContentLoaders/ImageLoader"; | |
| class ImageCard extends Component { | |
| state = { | |
| loadedErrorMessage: '', | |
| imageUrl: '', | |
| imageLoaded: false, | |
| imageLoadError: false, | |
| }; |
| import React, { Component } from 'react'; | |
| export default function (ComposedComponent) { | |
| class NetworkDetector extends Component { | |
| state = { | |
| isDisconnected: false | |
| } | |
| componentDidMount() { | |
| this.handleConnectionChange(); |
| body { | |
| margin: 0; | |
| padding: 0; | |
| font-family: Georgia, 'Times New Roman', Times, serif; | |
| -webkit-font-smoothing: antialiased; | |
| -moz-osx-font-smoothing: grayscale; | |
| text-align: center; | |
| } | |
| code { |
| .app { | |
| text-align: center; | |
| } | |
| .app p { | |
| font-size: 30px; | |
| font-family: Georgia, 'Times New Roman', Times, serif; | |
| } | |
| .app .page-title { |
| import React, { Component } from 'react'; | |
| import './App.css'; | |
| import images from './helper/images' | |
| import NetworkDetector from './Hoc/NetworkDetector'; | |
| class App extends Component { | |
| renderImage() { | |
| return ( | |
| <div className='image-list'> | |
| {images.map(data => <img src={data.image} alt='random' key={data.id} className="image" />)} |
| const images = [ | |
| { | |
| id: 1, | |
| image: 'https://lorempixel.com/200/300/abstract/3', | |
| size: { | |
| width: 200, | |
| height: 300, | |
| } | |
| }, | |
| { |
When contributing to this repository, please first discuss the change you wish to make via issue, email, or any other method with the owners of this repository before making a change.
Please note we have a code of conduct, please follow it in all your interactions with the project.