Fork me on GitHub
#clojurescript
<
2020-08-27
>
kimim02:08:22

Dear all, any suggestions on how to translate this react-reveal code to cljs? Thanks. https://www.react-reveal.com/tutorials/carousel/

const Container = styled.div`
  border: 1px solid red;
  position: relative;
  overflow: hidden;
  width: 300px;
  height: 150px;
`;
const CarouselUI = ({ children }) => <Container>{children}</Container>;
const Carousel = makeCarousel(CarouselUI);

render (
  <Carousel defaultWait={1000} /*wait for 1000 milliseconds*/ >
    <Slide right>
      <div>
        <h1>Slide 1</h1>
        <p>Slide Description</p>
      </div>
    </Slide>
    <Slide right>
      <div>
        <h1>Slide 2</h1>
        <p>Slide Description</p>
      </div>
    </Slide>
  </Carousel>
);

kimim03:08:11

got the solution, that react component shoudl reactify-component for makeCarousel.

(ns vision.views.test
  (:require [reagent.core :as r]
            ["react-reveal" :as reveal]
            ["react-reveal/makeCarousel" :as make-carousel]))

(defn CarouselUI [children]
  [:div children])

(def Carousel (make-carousel (r/reactify-component CarouselUI)))

tomrbowden07:08:54

@kimin Could you share the full solution? I am interested in how you solved it, but cannot get it to work.

danielstockton11:08:05

Has anyone had success server-side rendering a re-frame app with a aws lambda function? Don't see why it wouldn't work in principle compiled to node.js and wrapped with the lambda handler, but wondering if it's a smooth ride?