Fork me on GitHub
#reagent
<
2017-05-24
>
cmal06:05:49

Hi, how can I translate the InputGroup.Addon in react-bootstrap component

<FormGroup>
      <InputGroup>
        <InputGroup.Addon>@</InputGroup.Addon>
        <FormControl type="text" />
      </InputGroup>
    </FormGroup>
to a reagent component?

cmal06:05:33

For example I could use the InputGroup as a input-group, but I don't know how to change the InputGroup.Addon to a similar tag.

dimovich07:05:15

I have a similar question 🙂

dimovich07:05:47

how can this be written in cljs?

pesterhazy07:05:45

@cmal, just use (.-Addon InputGroup)

pesterhazy07:05:22

However, there may be issues if react-bootstraps expects the addon to be a direct child of its parent

cmal07:05:12

@pesterhazy ok, I'll have a try. Thank you.

pesterhazy07:05:19

@dimovich a React component is a fn that returns a React Element. So your component fn needs to return the result of r/as-element

pesterhazy07:05:20

[ContainerDimensions {} (fn [height] (r/as-element [my-component {:height height}]))]

pesterhazy07:05:46

whether this works depends on exactly how the component is implemented

dimovich07:05:55

@pesterhazy 👍 works for me! thanks

dimovich12:05:38

some experiments with reagent and a bunch of react components

dimovich12:05:55

press on the image

dealy13:05:32

Hi, I'm new to Reagent and CLJS, and am building my first App. I'm trying to use the SimpleSidebar example form the cookbook and get this error that $ isn't defined. The instructions say just to copy the simple-sidebar.css and to setup externs.js (which defines $ etc). It seems like there should be some JS to include. Any ideas?

pesterhazy13:05:51

$ sounds like jquery. Which example are you referring to?

dealy13:05:45

was there some jquery tooling that I needed to install? None of the books or examples I've been using have referred to jquery.

dealy15:05:10

yes that was it! I totally missed that line [:facepalm]