Fork me on GitHub
#reagent
<
2021-12-15
>
kenny00:12:57

Is there a way to tell Reagent to not convert some data to a JS structure?

kenny00:12:26

e.g., The below map would get converted to a JS object and the value for :raw-data would be the persistent map object, not a converted JS object.

{:option1  "a"
 :raw-data ^:skip {}}

lilactown01:12:19

IIRC if you pass the prop as a string key it skips it

lilactown01:12:23

could be misremembering

lilactown01:12:51

ah that is probably whether it converts it to kebab or camel case

kenny01:12:48

A workaround was to wrap my data I want skipped in #js and pull it out later.

p-himik07:12:28

If it's for a React component, you should be able to use :r> introduced here: https://github.com/reagent-project/reagent/issues/494 There's also related discussion here: https://github.com/reagent-project/reagent/issues/389

kenny17:12:24

Oh, thank you! This looks highly relevant.

πŸ‘ 1
Galaux14:12:13

Hey everyone ! I need a rich text editor component: nothing too fancy, must just support basic bold/underline/italic as well as links and {un,}ordered lists. Could anyone share some advice, library names (or even better: code) for a rich text editor? I'd like to stay away from Quill (due to some bugs it seems to exhibit) and I'm trying Draft.js with inspiration from https://gist.github.com/nrfm/0c33d297e8ae5cf36c98ef640003a118 but the ClojureScript I'm producing is very JavaScript-y (so hard to read/understand), already a bit complicated and I can't get it to do what I want …

Galaux13:12:48

To answer my own question – just in case someone else wonders – I am going with Draft.js (authors are from Facebook so that should be a token of seriousness). Also note that after loosing precious time, I realized there are much appreciated – unofficial? – plugins so that you don't have to reinvent the wheel https://www.draft-js-plugins.com/ .

kenny19:12:39

I'm working on extending react-select to use custom components built with Reagent. In their "https://react-select.com/components#defining-components" section, they have this bit: > When defining replacement components, it is important to do soΒ outsideΒ the scope of rendering the Select. Defining a replacement component directly in the components prop can cause issues. With the following bad and good example:

// Bad: Inline declaration will cause remounting issues
const BadSelect = props => (
  <Select {...props} components={{
    Control: ({ children, ...rest }) => (
      <components.Control {...rest}>
        πŸ‘Ž {children}
      </components.Control>
    )}}
  />
)

// Good: Custom component declared outside of the Select scope
const Control = props => ({ children, ...rest }) => (
  <components.Control {...rest}>
    πŸ‘ {children}
  </components.Control>
);

const GoodSelect = props => <Select {...props} components={{ Control }} />
I'm not quite sure what the equivalent Reagent implementation of the above would be. Perhaps something like this?
(defn CustomControl
  [{:keys [children] :as props}]
  (into [:> (.-Option react-select/components) props] children))

[:> react-select/default {:components {:Control (r/reactify-component CustomControl)}}]

p-himik19:12:55

LGTM although I'm on mobile so might've missed something.

kenny20:12:38

Nice. Thanks for the feedback.

kenny23:12:56

Is there a version of r/reactify-component that will not coerce the props into a persistent map, and instead directly pass the object to my function?