Core React API

type element;

/* Basic element creation */
[@bs.val] external null: element = "null";
external float: float => element = "%identity";
external int: int => element = "%identity";
external string: string => element = "%identity";
external array: array(element) => element = "%identity";

type component('props);
type componentLike('props, 'return) = 'props => 'return;

/* Component functions */
external component: componentLike('props, element) => component('props) = "%identity";

[@bs.module "react"]
external createElement: (component('props), 'props) => element = "createElement";

[@bs.module "react"]
external cloneElement: (element, 'props) => element = "cloneElement";

[@bs.splice] [@bs.module "react"]
external createElementVariadic: (component('props), 'props, array(element)) => element = "createElement";

[@bs.set]
external setDisplayName: (component('props), string) => unit = "displayName";

[@bs.get] [@bs.return nullable]
external displayName: component('props) => option(string) = "displayName";

type ref('value) = {mutable current: 'value};

[@bs.module "react"]
external createRef: unit => ref(Js.nullable('a)) = "createRef";

[@bs.module "react"] 
external useRef: 'value => ref('value) = "useRef";

module Ref = {
  [@deprecated "Please use the type React.ref instead"]
  type t('value) = ref('value);

  [@deprecated "Please directly read from ref.current instead"] [@bs.get]
  external current: ref('value) => 'value = "current";

  [@deprecated "Please directly assign to ref.current instead"] [@bs.set]
  external setCurrent: (ref('value), 'value) => unit = "current";
};

module Children = {
  [@bs.module "react"] [@bs.scope "Children"] [@bs.val]
  external map: (element, element => element) => element = "map";
  
  [@bs.module "react"] [@bs.scope "Children"] [@bs.val]
  external mapWithIndex: (element, [@bs.uncurry] ((element, int) => element)) => element = "map";
  
  [@bs.module "react"] [@bs.scope "Children"] [@bs.val]
  external forEach: (element, element => unit) => unit = "forEach";
  
  [@bs.module "react"] [@bs.scope "Children"] [@bs.val]
  external forEachWithIndex: (element, [@bs.uncurry] ((element, int) => unit)) => unit = "forEach";
  
  [@bs.module "react"] [@bs.scope "Children"] [@bs.val]
  external count: element => int = "count";
  
  [@bs.module "react"] [@bs.scope "Children"] [@bs.val]
  external only: element => element = "only";
  
  [@bs.module "react"] [@bs.scope "Children"] [@bs.val]
  external toArray: element => array(element) = "toArray";
};

module Context = {
  type t('props);

  [@bs.obj]
  external makeProps: (~value: 'props, ~children: element, unit) => {
    .
    "value": 'props,
    "children": element,
  };

  [@bs.get]
  external provider: t('props) => component({
    .
    "value": 'props,
    "children": element,
  }) = "Provider";
};

[@bs.module "react"]
external createContext: 'a => Context.t('a) = "createContext";

[@bs.module "react"]
external useContext: Context.t('any) => 'any = "useContext";

[@bs.module "react"]
external forwardRef: ([@bs.uncurry] (('props, Js.Nullable.t(ref('a))) => element)) => component('props) = "forwardRef";

[@bs.module "react"]
external memo: component('props) => component('props) = "memo";

[@bs.module "react"]
external memoCustomCompareProps: (component('props), [@bs.uncurry] (('props, 'props) => bool)) => component('props) = "memo";

module Fragment = {
  [@bs.obj]
  external makeProps: (~children: element, ~key: 'key=?, unit) => {. "children": element};
  
  [@bs.module "react"]
  external make: component({. "children": element}) = "Fragment";
};

module StrictMode = {
  [@bs.obj]
  external makeProps: (~children: element, ~key: 'key=?, unit) => {. "children": element};
  
  [@bs.module "react"]
  external make: component({. "children": element}) = "StrictMode";
};

module Suspense = {
  [@bs.obj]
  external makeProps: (~children: element=?, ~fallback: element=?, ~key: 'key=?, unit) => {
    .
    "children": option(element),
    "fallback": option(element),
  };
  
  [@bs.module "react"]
  external make: component({
    .
    "children": option(element),
    "fallback": option(element),
  }) = "Suspense";
};

module SuspenseList = {
  type revealOrder;
  type tail;
  
  [@bs.obj]
  external makeProps: (
    ~children: element=?,
    ~revealOrder: [ | `forwards | `backwards | `together]=?,
    ~tail: [ | `collapsed | `hidden]=?,
    unit
  ) => {
    .
    "children": option(element),
    "revealOrder": option(revealOrder),
    "tail": option(tail),
  };

  [@bs.module "react"]
  external make: component({
    .
    "children": option(element),
    "revealOrder": option(revealOrder),
    "tail": option(tail),
  }) = "SuspenseList";
};

type transitionConfig = {timeoutMs: int};
type callback('input, 'output) = 'input => 'output;

[@bs.module "react"]
external useTransition: (~config: transitionConfig=?, unit) => (callback(callback(unit, unit), unit), bool) = "useTransition";

[@bs.module "react"] [@deprecated "Please use JSX syntax directly."]
external jsx: (component('props), 'props) => element = "jsx";

[@bs.module "react"] [@deprecated "Please use JSX syntax directly."]
external jsxKeyed: (component('props), 'props, string) => element = "jsx";

[@bs.module "react"] [@deprecated "Please use JSX syntax directly."]
external jsxs: (component('props), 'props) => element = "jsxs";

[@bs.module "react"] [@deprecated "Please use JSX syntax directly."]
external jsxsKeyed: (component('props), 'props, string) => element = "jsxs";

[@react.component]
let make = (~title: string, ~children) => {
  <div>
    <h1> {React.string(title)} </h1>
    {children}
  </div>
}

/* Usage */
<MyComponent title="Hello">
  <p> {React.string("This is child content")} </p>
</MyComponent>

let themeContext = React.createContext("light");

[@react.component]
let make = () => {
  let theme = React.useContext(themeContext);
  
  <div className={theme === "dark" ? "dark-theme" : "light-theme"}>
    {React.string("Current theme: " ++ theme)}
  </div>
}

/* Provider usage */
let app = () => {
  <themeContext.Provider value="dark">
    <MyComponent />
  </themeContext.Provider>
}

[@react.component]
let make = () => {
  let inputRef = React.useRef(Js.Nullable.null);
  
  let focusInput = () => {
    switch (inputRef.current->Js.Nullable.toOption) {
    | Some(element) => element->focus
    | None => ()
    }
  };
  
  <div>
    <input ref={ReactDOM.Ref.domRef(inputRef)} />
    <button onClick={_ => focusInput()}>
      {React.string("Focus Input")}
    </button>
  </div>
}

[@react.component]
let make = (~children) => {
  let childCount = React.Children.count(children);
  let childArray = React.Children.toArray(children);
  
  <div>
    <p> {React.string("Number of children: " ++ string_of_int(childCount))} </p>
    <div className="children-container">
      {children}
    </div>
  </div>
}