Fork me on GitHub
#reagent
<
2018-05-27
>
kwladyka09:05:14

const styles = {
  root: {
    flexGrow: 1,
  },
};

function SimpleAppBar(props) {
  const { classes } = props;
  return (
    <div className={classes.root}>
      <AppBar position="static" color="default">
        <Toolbar>
          <Typography variant="title" color="inherit">
            Title
          </Typography>
        </Toolbar>
      </AppBar>
    </div>
  );
}

SimpleAppBar.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(SimpleAppBar);
https://material-ui.com/demos/app-bar/ How to run this code in reagent with hiccup? I am asking about withStyles and classes: PropTypes.object.isRequired which I am not sure what does.
[:> AppBar
      {:position "static"
       :color "default"}
      [:> Toolbar
       [:> Typography
        {:variant "title"
         :color "inherit"}
        "Title"]]]

kwladyka10:05:20

hmm or maybe it is done only for examples purpose on material-ui

valtteri12:05:17

But if you figure out how to use it, please let me know. 🙂

valtteri12:05:14

AFAIK PropTypes.object.isRequired tells React that “this prop is required” and React will give a warning if it’s not passed.

valtteri12:05:22

I’ve been happily ignoring such declarations in the examples.

nenadalm13:05:01

@kwladyka, @valtteri here is houw to use HOC (higher order components): https://stackoverflow.com/questions/45909731/react-hoc-wrapping-with-clojurescript-and-reagent. (Since HOC works with react components, you need to convert it with reactify-component first and then back to reagent component with adapt-react-class)

valtteri14:05:03

Cool! reactify-component was indeed what I was missing. I’ll try it out later today. Thanks @nenadalm

lilactown14:05:36

is it possible to update a ratom and not trigger a re-render?

nenadalm18:05:01

Why not to use just cljs.core/atom then?

lilactown01:05:56

that’s a really good point 😄

pesterhazy16:05:41

I don’t think so