Fork me on GitHub
Slack Archive

This page is not created by, affiliated with, or supported by Slack Technologies, Inc.

2018-12-13

Channels

#reagent
<
2018-12-13
>
cmal09:12:20

Hi, how to specify id props in reagent/create-class function?

cmal09:12:21

like [:div#some-id "xxx"]?

cmal09:12:53

how to (reagent/create-class {:id "some-id"})?

danielneal10:12:57

Anyone looked at react hooks at all? They sound interesting - a way of using react state without classes

aisamu12:12:41

Yup, and you might find interesting conversations re: that nearer its launch date on the slack logs. @U4YGF4NGM has a POC (or better) implemented, IIRC

danielneal12:12:15

oo cool thanks

lilactown16:12:32

React Hooks works out of the box

danielneal16:12:26

hx sounds interesting, is this your lib?

lilactown16:12:09

I’ve been building a cute little app and it seems to work very well! but it still feels very early days

lilactown16:12:22

I haven’t announced the library’s release yet or anything

lilactown16:12:59

if you decide to try it, feel free to ping me in #clojurescript or directly, or open up issues and whatnot on github!

danielneal16:12:55

I like the sound of getting quite close to react itself

danielneal16:12:21

react seems incredibly well engineered, it seems that sometimes the abstraction layers can get a bit clunky

danielneal16:12:49

I'm pretty bedded in with re-frame now though, but I'll bear it in mind if I have something small to try

lilactown16:12:54

indeed. the original impetus for the library was because I wanted to use apollo-client and a bunch of other more complex React libraries

lilactown16:12:04

and suspense

lilactown16:12:18

Hooks is what took it from a thought-experiment to something worth using IMO

danielneal16:12:18

suspense is the async rendering stuff?

lilactown16:12:23

we use re-frame at work as well and I really like it. I’m considering how to interop with stock re-frame, or fork it for use with raw React

lilactown16:12:45

it’s unfortunate that it’s relatively coupled to reagent as it’s view library

lilactown16:12:05

actually, in my original Hooks POC someone opened a pull request with a re-frame hook: https://github.com/Lokeh/hooks-demo/blob/master/src/hooks_demo.cljs#L47

danielneal16:12:51

ooh interesting

manandearth16:12:40

In a reagent component, How do you highlight the text (select the text) of a newly created instance of a 

{:type "text}
. (sorry no js background..) I manage to create on-click events to add more instances of my div, and I can focus on the text field, but I want it selected.. for convenience of course.

mikerod17:12:38

you want it highlighted immediately?

mikerod17:12:00

or when focused? or when text is added via on-change?

mikerod17:12:29

I think it is common to do the highlighting on-focus

mikerod17:12:53

So perhaps that.

👍 4
❤️ 2
manandearth17:12:13

thanks @mikerod . Just getting my head round the js interop..

mikerod17:12:43

yeah, will have to understand that part to understand how it works out

mikerod17:12:16

there isn’t a direct React/Reagent prop to set (or even an html element attribute) to do the selection that I am aware of - or see online

mikerod17:12:30

so have to call method on the dom element itself

mikerod17:12:56

which during an event handler like :on-focus will be the event object’s, e above, target

manandearth18:12:40

Applied! Thanks again.

manandearth21:12:17

Yes, I see that. Thanks!

manandearth21:12:28

I was looking at https://github.com/lambdaisland/kanban/blob/ep-10-reagent-cursors/src/cljs/kanban/core.cljs In the above code the Card function uses :autoFocus, I assume that it is an inconsistency that I just still don't understand.