Using material ui in reason react code


#1

Hi all
I have the following component:

type action = 
  | DoNothing;

type state = {
  empty: string
};  

let component = ReasonReact.reducerComponent("DashboardContainer");

let make = (_children) => {
  ...component,
  initialState: () => {empty: ""},
  reducer:  (_action :action, _state: state) => ReasonReact.NoUpdate,
  render: _self => {
    
  }, 
};

let default = ReasonReact.wrapReasonForJs(
  ~component,
  (_) => make([||])
);

In this component, I want to insert

  <Grid container>
    <Grid item>
      <p>Hello1</>
    </Grid>
    <Grid item>
       <p>Hello2</>
    </Grid>    
  </Grid>

The Grid is from import { Grid } from 'material-ui';. Is there a opportunity to do it?
What am I trying to archive is:

type action = 
  | DoNothing;

type state = {
  empty: string
};  

let component = ReasonReact.reducerComponent("DashboardContainer");

let make = (_children) => {
  ...component,
  initialState: () => {empty: ""},
  reducer:  (_action :action, _state: state) => ReasonReact.NoUpdate,
  render: _self => {
  <Grid container>
    <Grid item>
      <p>Hello1</>
    </Grid>
    <Grid item>
       <p>Hello2</>
    </Grid>    
  </Grid>
  }, 
};

let default = ReasonReact.wrapReasonForJs(
  ~component,
  (_) => make([||])
);

How would you solve the problem?

Thanks


#2

Hi, I have written a generator for bindings to MUI, here’s the link:

https://redex.github.io/package/@jsiebern/bs-material-ui

A more general resource towards this topic:


#3

Thanks a lot. I will try it.