-1

I am trying to use masonry in a Preact app, tried several React plugins using react/compat but they are all failing.

This is how I'm trying:

const App = () => (
  <Landing name="shoecare">
    <!-- all the working code -->

    <!-- here -->
    <script src="https://unpkg.com/masonry-layout@4.2.2/dist/masonry.pkgd.min.js"></script>
    <script>
    var grid = document.querySelector(".how__list");
    new Masonry(grid, {
      itemSelector: ".how__item",
      columnWidth: document.querySelctor('body').clientWidth / 2 - 16,
    });
    </script>
    <!-- end -->
  </Landing>
);

clab(<App />);

But it fails to compile:
enter image description here

Is it posible?

I managed to run some regular JS onclick, like so;

<span class="services__nav-previous" onClick={(e) => scrollLeft()}>
jonrsharpe
  • 115,751
  • 26
  • 228
  • 437
Toni Michel Caubet
  • 19,333
  • 56
  • 202
  • 378
  • You might find this useful. You use a `ref` to get a handle on the DOM element rendered by react, then you can run `useEffect` to setup the non-react component: https://rossbulat.medium.com/react-using-refs-with-the-useref-hook-884ed25b5c29 – Evan Trimboli Feb 05 '21 at 10:46

1 Answers1

2

i guess you're using functional components, so to have any js code inside of them you should do it like this

const App = () => {
  // your js code here
  return (
  // here you put your components
  )
}

EDIT: and you don't put < script >< /script > inside of your functional component, you add them in your index.html file, not in app.js

dlyzo
  • 128
  • 1
  • 10
  • The problem that i'm facing is that i have no experience in Preact (i didn't develop this app), but if I try what you suggest the highlighter crashes: https://i.imgur.com/FMYjRco.png any thoughts? – Toni Michel Caubet Feb 05 '21 at 10:25
  • check you brackets, after const App =() => should go { } not () – dlyzo Feb 05 '21 at 10:27
  • https://reactjs.org/tutorial/tutorial.html you could try the tutorial to understand how it works tho – dlyzo Feb 05 '21 at 10:27
  • Sorry, you are right. but problem persists https://i.imgur.com/VDyvucj.png And i wish i had time for that.. as i mentioned i'm already very late in this one.. – Toni Michel Caubet Feb 05 '21 at 10:29
  • 1
    change return brackets to () not {}, my fault – dlyzo Feb 05 '21 at 10:30
  • and you dont use name while trying to show to className, there's a collision between name in namespaces, so change name for class names to className – dlyzo Feb 05 '21 at 10:31