Define Js Object as Reason Record

reasonreact

#1

Hi, I want create a create a binding package, and one of the methods returns object,

for example, in javascript

<Component   
 ({startDate, endDate}) => console.log(range)
/>

how i defined type for startDate and endDate in Reasonml?


#2

Would you prefer to write write that down ?

<Component>
    {({startDate, endDate}) => console.log(range)}
</Component>

You can do that (with using original js object):

module Component = {
  [@bs.module]
  external myJSReactClass: ReasonReact.reactClass = "./myJSReactClass";

  type params = {
    .
    "startDate": Js.Date.t,
    "endDate": Js.Date.t,
  };

  let make = (children: (. params) => ReasonReact.reactElement) =>
    ReasonReact.wrapJsForReason(
      ~reactClass=myJSReactClass,
      ~props=Js.Obj.empty(),
      children,
    );
};

let _ =
  <Component>
    ...{
         (. params) => {
	            let startDate = params##startDate;
           		let endDate = params##endDate;
           		Js.log(startDate);
           		Js.log(endDate);
    	       <div />
		 }
       }
  </Component>;

Or do that (converting to reason record):

module Component = {
  [@bs.module]
  external myJSReactClass: ReasonReact.reactClass = "./myJsComponent";

  type params = {
    startDate: Js.Date.t,
    endDate: Js.Date.t,
  };

  type jsParams = {
    .
    "startDate": Js.Date.t,
    "endDate": Js.Date.t,
  };

  let make = (children: (params) => ReasonReact.reactElement) =>
    ReasonReact.wrapJsForReason(
      ~reactClass=myJSReactClass,
      ~props=Js.Obj.empty(),
      (. jsParams: jsParams) => children({startDate: jsParams##startDate, endDate: jsParams##endDate}),
    );
};

let _ =
  <Component>
    ...{
         ({startDate, endDate}) => {
           Js.log(startDate);
           Js.log(endDate);
           <div />;
         }
       }
  </Component>;

#3

hi thanks man