holder.js does not work when the page renders twice in React #225

jguo1002 · 2019-07-22T16:59:32Z

I am using holder.js in React with react-bootstrap. In index.html I added in <header>:
<script src="holder.js"></script>

In the component ProjectCard I wrote:
<Card.Img className="proj-card-img" variant="top" data-src="holder.js/100px180" />

This component is rendered using map() function

{Object.keys(this.state.projects).map(key=>
     <ProjectCard key={key} index={key} details={this.state.projects[key]}/>)}

It works nicely if I set state in ComponentWillMount(). However, if I update the state and the page renders twice (e.g. use firebase to syncState), holder.js will not work.

I have tried

<script>
    Holder.run({
        images:"MyClassName"
    })
</script>

but it didn't work either.

Did I write anything wrong? Thanks!

The text was updated successfully, but these errors were encountered:

imsky · 2019-08-12T14:15:13Z

@cindy100295 could you provide a fiddle or a Gist (or anything that works for you) of the page?

in the meantime, i think one thing you could try is change this:

Holder.run({
        images:"MyClassName"
    })

to this:

Holder.run({
        images:".MyClassName" // should be .proj-card-img if going by your comments
    })

note the . before the class name, as the images property needs to be a valid CSS selector

jguo1002 · 2019-08-12T17:35:37Z

My code in index.html:

<head>
  <script src="holder.js"></script>
  <script>
      Holder.run({
        images: '.proj-card-img'
      })
    </script>
</head>

In React Component:

<Card.Img className="proj-card-img" variant="top" data-src="holder.js/100px180" />

But this time it does not show anything.

Some background: I have five cards, two of them are loaded from a JSON file (local). Three of them I pulled from Firebase (remote). Every time the two local cards render first. Then the other three show up later. Holder.js work for the local two but not for the remote three.

If I wrote the code above, five cards have no placeholder images.
Maybe it is because when the component updates, index.html does not refresh? Or my code is wrong...

imsky · 2019-08-13T03:23:28Z

could you try something like this instead:

componentDidMount: function () {
  requestAnimationFrame(function () {
    Holder.run({
      images: '.proj-card-img'
    });
  });
}

also, as a followup, you could try passing a Node (Element) to images which works better if you treat each placeholder as a component

jguo1002 · 2019-10-12T21:46:29Z

Thanks! I figure it out.
In index.html:

<script>
    function holder() {
      Holder.run({
        images: ". MyClassName"
      })
    }
</script>

In component:

componentDidMount() {
    window.holder();

And then it works.

imsky · 2019-10-14T15:54:07Z

nice @cindy100295 i'll look into adding this to docs

Senninseyi · 2020-05-09T08:17:59Z

i used mine without the didmountComponent.... like this
import 'holderjs' { img: "holder.js/100px270", textHeader: "Well handled customers", link: "Our reviews on Reviews.co.uk", },
where it is being used

nimbus2300 · 2020-12-28T23:10:32Z

I struggled to get holderjs 2.9.7 (https://www.npmjs.com/package/holderjs) working nicely in react bootstrap 1.4 (bootstrap 4.5.3).

I was trying to use it in a class component. In the end this worked:

yarn add holderjs && yarn install

Then in my component:

import { run as runHolder } from 'holderjs/holder';

class Foobar extends Component

 constructor(props) {
    ...
    this.runHolder = runHolder;
  }

 componentDidMount() {
   this.runHolder('image-class-name-no-initial-dot');
}

And on the image:

<Image src="holder.js/100x100"/>

imsky · 2021-01-05T23:22:52Z

cool @nimbus2300 - glad you got it working. will keep that in mind when there's a native react component

sersart · 2021-01-30T18:36:33Z

Hi,
you can run holderjs in React function without any problem. Please check example.

import React, { Fragment, useEffect } from "react";
import { Image } from "react-bootstrap";
import { run as runHolder } from 'holderjs/holder';

export function HolderExample() {
    useEffect(() => {        
        runHolder('image-class-name');
    });
    return (
         <Fragment>
           <Image 
                  className="image-class-name"
                  roundedCircle
                  src="holder.js/20x20?text=J&bg=28a745&fg=FFF"
            /> 
          </Fragment>
    );

Have fun.

According to imsky/holder#225 (comment) holderjs.run argumen can be a string of targeted element classes. Don't know if this is a recent of holderjs change but this .d.ts dosen't work with holderjs as is and makes it unusable with a react ts setup.

arnil6585 · 2021-08-11T12:48:28Z

yoieh:patch-1

* Holderjs.run options can be a string According to imsky/holder#225 (comment) holderjs.run argumen can be a string of targeted element classes. Don't know if this is a recent of holderjs change but this .d.ts dosen't work with holderjs as is and makes it unusable with a react ts setup. * extended holderjs test to just run with a string * run() can alsow be empty Made options optional * Removed missleading options as string

albertorodriguezdiaz · 2021-11-24T16:32:35Z

Hi All.
You need to add:
1)
import { run as runHolder } from 'holderjs/holder';
2)
useEffect(() => { runHolder('image-class-name'); });
It's all 😃

nimbus2300 · 2021-11-24T23:36:44Z

Hi All. You need to add: 1) import { run as runHolder } from 'holderjs/holder'; 2) useEffect(() => { runHolder('image-class-name'); }); It's all 😃

Assuming you're working with functional components, yes.

gunslingor · 2022-08-02T06:38:06Z

It only seems to work when I go to a URL, but when I use the react router to change the content of div for example with a navbar, it doesn't load.

import Container from "react-bootstrap/Container";
import 'bootstrap/dist/css/bootstrap.min.css';
import 'holderjs/holder';

class ProductList extends React.Component {
    render() {
        return (
            <Container>
                <Row xs={1} md={2} className="g-4">
                    <Col>
                        <Card>
                            <Card.Img variant="top" src="holder.js/100px160" />
                            <Card.Body>
                                <Card.Title>Card title</Card.Title>
                                <Card.Text>
                                    This is a longer card with supporting text below as a natural
                                    lead-in to additional content. This content is a little bit
                                    longer.asdfff
                                </Card.Text>
                            </Card.Body>
                        </Card>
                    </Col>
                </Row>
            </Container>
        );
    }
}
class Routing extends React.Component {
    render() {
        return (
        <BrowserRouter>
            <Routes>
                <Route path="/" element={ <Layout /> }>
                    <Route path="Home" element={ <Home /> } />
                    <Route path="Shop" element={ <Shop /> } />
                    <Route path="About" element={ <About /> } />
                    <Route path="Contact" element={ <Contact /> } />
                </Route>
                <Route path="*" element={<Navigate to="/Home" />} />
            </Routes>
        </BrowserRouter>
        )
    }
}

gunslingor · 2022-08-12T06:03:19Z

@nimbus2300 Thanks that solve it for me eventually. I think I understand it too, learning... was confused by runHolder... it's really run holder.js not a holder of run operations, lol, was confused. One thing I can't understand and google can't find is how this image-class-name-no-initial-dot class or 'userOptions' argument works.

jguo1002 changed the title ~~holder.js does not work when the page render twice in React~~ holder.js does not work when the page renders twice in React Jul 22, 2019

jguo1002 closed this as completed Oct 12, 2019

yoieh mentioned this issue Aug 11, 2021

Holderjs.run options can be optional DefinitelyTyped/DefinitelyTyped#55077

Merged

8 tasks

arnil6585 mentioned this issue Aug 11, 2021

yoieh:patch-1 #235

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

holder.js does not work when the page renders twice in React #225

holder.js does not work when the page renders twice in React #225

jguo1002 commented Jul 22, 2019

imsky commented Aug 12, 2019

jguo1002 commented Aug 12, 2019

imsky commented Aug 13, 2019

jguo1002 commented Oct 12, 2019

imsky commented Oct 14, 2019

Senninseyi commented May 9, 2020 •

edited

Loading

nimbus2300 commented Dec 28, 2020

imsky commented Jan 5, 2021

sersart commented Jan 30, 2021 •

edited

Loading

arnil6585 commented Aug 11, 2021

albertorodriguezdiaz commented Nov 24, 2021

nimbus2300 commented Nov 24, 2021

gunslingor commented Aug 2, 2022

gunslingor commented Aug 12, 2022

holder.js does not work when the page renders twice in React #225

holder.js does not work when the page renders twice in React #225

Comments

jguo1002 commented Jul 22, 2019

imsky commented Aug 12, 2019

jguo1002 commented Aug 12, 2019

imsky commented Aug 13, 2019

jguo1002 commented Oct 12, 2019

imsky commented Oct 14, 2019

Senninseyi commented May 9, 2020 • edited Loading

nimbus2300 commented Dec 28, 2020

imsky commented Jan 5, 2021

sersart commented Jan 30, 2021 • edited Loading

arnil6585 commented Aug 11, 2021

albertorodriguezdiaz commented Nov 24, 2021

nimbus2300 commented Nov 24, 2021

gunslingor commented Aug 2, 2022

gunslingor commented Aug 12, 2022

Senninseyi commented May 9, 2020 •

edited

Loading

sersart commented Jan 30, 2021 •

edited

Loading