A minimalistic ClojureScript interface to React.js
p-himik 2020-12-17T01:04:34.386600Z

Wrap [:div ...] in reagent/as-element.

clyfe 2020-12-17T13:51:51.387100Z

Depends what you mean by components; if "mini SPAs embedded in page", yes for reagent, and yes with limitations for re-frame (limitations because global app-db); if "DOM attached behavior a-la StimulusJS or Vue.js" no.

greensponge 2020-12-17T14:30:34.391900Z

Hello everyone, I'm trying to get (azure auth) to work with Reagent. How can I convert this React hook to something Reagent can understand? Is it possible? I think I have the initialization working correctly, and the Authenticated/Unauthenticated templates seem to render as expected, but I can't seem to grasp how to translate the code I have commented below into something Reagent understands (the raw React code is from the Github example I have linked above):

import React from 'react';
import { useMsalAuthentication, AuthenticatedTemplate, UnauthenticatedTemplate } from "@azure/msal-react";

export function App() {
const {login, result, error} = useMsalAuthentication("popup"); // <-- I can't seem to convert this into usable CLJS code

return (
        <p>Anyone can see this paragraph.</p>
        <p>At least one account is signed in!</p>
        <p>No users are signed in!</p>

p-himik 2020-12-17T14:56:30.392100Z

You will have to use a function component for that. Read this section and the next one:

greensponge 2020-12-17T15:10:17.392400Z

Thank you for pointing me in the right direction @p-himik, I will check it out. šŸ‘

clyfe 2020-12-17T16:23:29.393Z

This new "fun comp" thing allows use of hooks

Felix M 2020-12-17T16:51:03.393300Z

Thanks, that's good to know. Yes I was aiming for the Vue.js style of sprinkling in components.


hi, suppose I have a super small application, it is a reagent component that shows a button and send an ajax request when clicked. The question is, can I have the same application multiple times included in the same html page?

p-himik 2020-12-17T20:44:29.395500Z



Thanks @p-himik, sorry, I forget to mention that reframe is also involved, my fears are because of the app-state, anyway Iā€™m going to give it a try is not that hard, I just wanted to know before

p-himik 2020-12-17T21:12:07.395900Z

You don't really need re-frame in a "super small application with a button that sends a request". And having re-frame there complicates things. You either have to dance around your state much more or straight up resolve to iframes.


So I have this widget component which returns a function so that local state works, but when I want to problematically render several widget components in my root component I get an error "Functions are not valid as a React child" because obviously it's returning a function. I'm not sure how to fix this issue while preserving component local state in reagent.

p-himik 2020-12-17T21:20:26.396600Z

Don't use (widget ...), use [widget ...]. Apart from that, wrap it in a call to reagent.core/as-element.


Thanks that worked, also what's the difference between calling the component with parnes vs brackets?

p-himik 2020-12-17T21:24:46.397100Z

It's all in the documentation:

juhoteperi 2020-12-17T21:38:10.400100Z

@mikethompson Do you remember this Appendix 2 here on [] vs () docs: This might be one of the docs copied from re-frame wiki. I think something is wrong in the example that should show some problem, it is perfectly valid code, no error there. I could just remove this, but if we can remember the original idea I could fix the example.