danistefanovic / react-lazy-hero Goto Github PK

The available hero height is not fully covered on my phone in Chrome.

Is it possible to make parallax scroll to another direction? i tried negative offset but it doesn't work

Hi. When loading the application, the error occurs
Module not found: Can't resolve 'styled-components' in '.../node_modules/react-lazy-hero/lib'

If I install the dependency in my project everything works.

node 8.11.4
react 16.3.1

Would you be able to add an optional attribute for the component that adds in aria-labels for accessibility?

Hi,

It may seem simple and stupid but i'm at a dead end.
Been staring at this for a long time...

I can't seem to get the image to display in the hero...
I've tried coping your example and still nothing...

Any assistance would be much appreciated.

Regards,
Elliot

Hey,

Saw a few other similar issues but the solutions for them don't seem to fix this.

let props = {
    imageSrc: 'https://www.alm.com/wp-content/uploads/2017/10/NYC_Contact-Us-Page-Form-image.jpg" />',
    color: '#ffff33',
    minHeight: '14vh',
}

const LargeHero = () => (
    <LazyHero {...props}>
        <h1>Generic Startup Hype Headline</h1>
    </LazyHero>
)

I also tried with your imageSrc from docs imageSrc="https://unsplash.it/2000/1000" and also no joy.

Changing minHeight works, but nothing around background image or color can be changed.

Versions:

"react": "^16.8.1",
"react-lazy-hero": "2.0.0",
"styled-components": "4.0.0",

Running an accessibility scan of my site using this component and found this interesting info.

Seems to be caused from https://github.com/danistefanovic/react-lazy-hero/blob/master/src/LazyHero.js#L166-L167

The naming is in conflict with https://www.w3schools.com/tags/att_font_color.asp

I'm import react-lazy-hero into a component, but when i make test to my component fails.

import LazyHero from 'react-lazy-hero';

class Hero extends Component {

    constructor(props) {
	super(props);
    }

   render() {
       const {
           image,
	   parallaxOffset,
	   isFixed,
	   isCentered,
	   overlayColor,
	   opacity,
	   minHeight,
           children
     } = this.props;
     <LazyHero 
         isFixed={isFixed}
         isCentered={isCentered}
         imageSrc={image}
         opacity={opacity}
         color={overlayColor}
         parallaxOffset={parallaxOffset}
         minHeight={minHeight}>
         {children}
      </LazyHero>
   }
}

when run test of this component fail:

Please can you say me why ???

Hi, I'm having problems with rendering my BG in the lazy-hero!... can you help me figure ot the reason for this? Thank you!

This is how the browser looks:

This is my index where I import my Hero.js:

In Hero.js I import lazy-hero

Do you have an idea about why the background-image: attribute doesn't show the picture?

Greetings!

The problem as the title says, the "background-size" css property of the "background-image" container div becomes bigger and bigger after each LazyHero component.

The style prop applies to the parent div, so cant use that to set manually the correct values.

Any chance if server-side rendering is supported via styled-components?

TypeError: styleSheet.getName is not a function
    at ComponentStyle.generateAndInjectStyles (/Users/clodal/sites/abc/node_modules/react-lazy-hero/node_modules/styled-components/lib/models/ComponentStyle.js:95:37)
    at StyledComponent.generateAndInjectStyles (/Users/clodal/sites/abc/node_modules/react-lazy-hero/node_modules/styled-components/lib/models/StyledComponent.js:154:40)
    at StyledComponent.componentWillMount (/Users/clodal/sites/abc/node_modules/react-lazy-hero/node_modules/styled-components/lib/models/StyledComponent.js:192:40)
    at processChild (/Users/clodal/sites/abc/packages/server/node_modules/react-dom/cjs/react-dom-server.node.development.js:2167:16)
    at resolve (/Users/clodal/sites/abc/packages/server/node_modules/react-dom/cjs/react-dom-server.node.development.js:2061:5)
    at ReactDOMServerRenderer.render (/Users/clodal/sites/abc/packages/server/node_modules/react-dom/cjs/react-dom-server.node.development.js:2380:22)
    at ReactDOMServerRenderer.read (/Users/clodal/sites/abc/packages/server/node_modules/react-dom/cjs/react-dom-server.node.development.js:2354:19)
    at Object.renderToString (/Users/clodal/sites/abc/packages/server/node_modules/react-dom/cjs/react-dom-server.node.development.js:2726:25)
    at /Users/clodal/sites/abc/packages/server/build/index.js:56:257515
    at tryCatch (/Users/clodal/sites/abc/node_modules/babel-runtime/node_modules/regenerator-runtime/runtime.js:62:40)
    at Generator.invoke [as _invoke] (/Users/clodal/sites/abc/node_modules/babel-runtime/node_modules/regenerator-runtime/runtime.js:296:22)
    at Generator.prototype.(anonymous function) [as next] (/Users/clodal/sites/abc/node_modules/babel-runtime/node_modules/regenerator-runtime/runtime.js:114:21)
    at step (/Users/clodal/sites/abc/node_modules/babel-runtime/helpers/asyncToGenerator.js:17:30)
    at /Users/clodal/sites/abc/node_modules/babel-runtime/helpers/asyncToGenerator.js:28:13
    at <anonymous>

I am in the process of migrating my portfolio from a regular CRA application to a CRA-typescript app.

I am having issue with this LazyHero, as the background image is not displayed and this error pops up in the console:

LazyHero.js:167 Uncaught TypeError: Cannot read property 'offsetHeight' of undefined
    at LazyHero.updateSize (LazyHero.js:167)
    at Image.image.onload (LazyHero.js:156)

I am new to TypeScript so it might be a problem with type declarations (maybe not). I just added a simple declare module 'react-lazy-hero'; to have the app not crash, but might be not enough to have it work properly.
Any advice ?

the basic usage example had "image" when it should have "imageSrc" for the property