This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2018-08-17
Channels
- # beginners (70)
- # boot (4)
- # cider (16)
- # clara (6)
- # cljdoc (21)
- # cljs-dev (2)
- # cljsrn (1)
- # clojure (73)
- # clojure-finland (2)
- # clojure-nl (6)
- # clojure-russia (35)
- # clojure-sg (1)
- # clojure-spec (14)
- # clojure-uk (146)
- # clojurebridge (2)
- # clojurescript (128)
- # cryogen (2)
- # cursive (20)
- # datomic (27)
- # emacs (6)
- # events (8)
- # figwheel-main (57)
- # fulcro (46)
- # hoplon (3)
- # hyperfiddle (2)
- # immutant (3)
- # jobs (6)
- # jobs-discuss (15)
- # juxt (2)
- # off-topic (33)
- # parinfer (2)
- # portkey (4)
- # protorepl (1)
- # re-frame (4)
- # reagent (78)
- # ring-swagger (45)
- # schema (6)
- # shadow-cljs (167)
- # spacemacs (2)
- # specter (13)
- # tools-deps (6)
Hey, guys using soda ash. How do you guys do theming? e.g if I want to use their components but with a dark theme. I don't get what the semantic ui docs are trying to explain
I haven't used soda-ash, but am considering it, and for theming I was thinking of adding a LESS compilation task to my leiningen project?
Guys! I've spent all day trying to figure out an idiomatic way of using a react component like this in a reagent app:
https://whoisandy.github.io/react-rangeslider/
I've fetched the library (and @cljs-oss/module-deps
) via npm, refer to them via project.clj
foreign-libs
:
clojure
{:file "resources/public/js/rangeslider.min.js"
:provides ["react-rangeslider"]
:module-type :es6}
And import it in my view.cljs
via ns require [react-rangeslider :as range-slider]
I can't find the idiomatic way of making it work - should I use form-3?Yes @urbanslug, it seems hackable, but still way too tedious, and seems like some react components have to be wrapped before they can be used (as seems to be the case with the react-rangeslider)
I believe I've come close with this: (r/adapt-react-class (. range-slider -default))
But when I use it in hiccup like [(r/adapt-react-class (. range-slider -default))]
I keep getting errors such as .default is not a constructor
, or something telling me I've passed an object instead of a component.
Problem I think is that the react component react-rangeslider
needs to be wrapped/prototyped, as in their examples on the website: https://whoisandy.github.io/react-rangeslider/. I don't know the idiomatic way of doing that in a reagent setup.
(:require ["react-rangeslider" :default Slider])
[:div#my-slider
[:> Slider {:value 122}]]
If I try this: [:> Slider #{}]
, I get this:
Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
One of their examples is as follows:
import React, { Component } from 'react'
import Slider from 'react-rangeslider'
class Horizontal extends Component {
constructor (props, context) {
super(props, context)
this.state = {
value: 10
}
}
handleChangeStart = () => {
console.log('Change event started')
};
handleChange = value => {
this.setState({
value: value
})
};
handleChangeComplete = () => {
console.log('Change event completed')
};
render () {
const { value } = this.state
return (
<div className='slider'>
<Slider
min={0}
max={100}
value={value}
onChangeStart={this.handleChangeStart}
onChange={this.handleChange}
onChangeComplete={this.handleChangeComplete}
/>
<div className='value'>{value}</div>
</div>
)
}
}
export default Horizontal
(:require ["react-rangeslider" :default Slider]
[reagent.core :as r])
(defn my-slider-fn []
[:div#my-slider
[:> Slider {:value 122}]])
(r/create-class {:reagent-render [:div#parent]
:component-did-mount (r/render [my-slider-rn]
(.getElementById js/document "slider-parent"))})
(defn init
[]
(r/create-class {:reagent-render [:div#parent]
:component-did-mount (r/render [my-slider-rn]
(.getElementById js/document "slider-parent"))}))
Will try that out @urbanslug! Reverting in a bit.
Get this error:
Only :as, :refer and :rename options supported in :require / :require-macros; offending spec: ["react-rangeslider" :default Slider]
If I replace the ns require with [react-rangeslider :as range-slider :refer [Slider]]
and then use your my-slider-fn
, I get this error:
Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
Next option:
I just have this in the ns require: [react-rangeslider :as range-slider]
Then the my-slider-fn
is like this:
(defn my-slider-fn []
[:div#my-slider
[:> (. range-slider -default) {:value 122}]])
The result of that is:
Uncaught TypeError: _resizeObserverPolyfill2$$module$home$luposlip$folder$project$node_modules$react_rangeslider$lib$Rangeslider.default is not a constructor
at Slider.componentDidMount (Rangeslider.js:29)
react-dom.inc.js
mentions that
The above error occurred in the <Slider> component:
in Slider
in div
in project.views.my_slider_fn
I'll give it a 30 minutes break - thanks for your input so far @urbanslug! When I get this to work I'll definitely write a blog post about it, have been browsing through lots of posts, forums, changelogs (reagent and re-frame) and the new stuff in cljs 1.9.x on npm imports, commonjs compatibility etc. But so far hasn't seen the light 😉
It's the closest I get to something that looks like a react component. But it's not usable as you can see from the above.
Or my question could have been : the example you provided, does it actually work on your setup?
Hello, I have some code like this:
(defn header-title
[title & dt]
[:h1 title
[:small (format-header-date dt)]])
(defn agenda-header
[]
[:div
(header-title "Today" (js/Date.)])
When this renders I get “NAN” in the <small> tag. When I step through in the debugger, the argument that gets passed to format-header-date
is reported as a cljs.core.IndexedSeq rather than a JS Date. Anyone have an idea why?Calling the format-header-date
function in the REPL returns the expected formatted string
@urbanslug the problem is almost certainly in how you’re importing the component. you do not need to do all those shenanigans to get it to render once you figure out how to import it. you will just need to do a [:> ReactRangeSlider {options}]
if there is a UMD build or some kind of es5 build, then it should attach the component to a global, which will avoid you having to mess with the es6 default import
He got
Only :as, :refer and :rename options supported in :require / :require-macros; offending spec: ["react-rangeslider" :default Slider]
@luposlip one trick when I’m having trouble with importing npm libs is just to console.log what is being imported
(ns foo
(:require ["react-rangeslider" :as range-slider]))
(js/console.log range-slider)
right so @luposlip if you just use the prebuilt & minified version, you can access the component using js/ReactRangeslider
. https://github.com/whoisandy/react-rangeslider#getting-started That’s a lot easier than messing with es6 imports
@lee.justin.m you taught me well 😄
Thanks @lee.justin.m, will test that later :)