1
34%
MIT
bs-react-notification-system
0.0.6
Reason bindings for react-notification-system
bindingreactui
homepagerepositorynpmissuesdocumentation

Reason bindings for react-notification-system

npm

Reason bindings for react-notification-system.

Status

🚧 This is a WIP, not everything is supported yet. 🚧

Feel free to create an issue or PR if you find anything missing.

Installation

yarn add bs-react-notification-system
yarn add react-notification-system@0.2.x

Then add bs-react-notification-system to bs-dev-dependencies in your bsconfig.json:

{
  ...
  "bs-dev-dependencies": ["bs-react-notification-system"]
}

Usage

  • RE
  • ML 
type action =
  | AddNotification(string);

type state = {
    _notificationSystem: ref(option(ReasonReact.reactRef)),
};

let setNotificationSystemRef = (notificationRef, {ReasonReact.state}) => 
  state._notificationSystem := Js.Nullable.to_opt(notificationRef) ;

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

let addNotification = (message, state) => {   
    switch state._notificationSystem^ {
    | None => ()
    | Some(r) => ReasonReact.refToJsObj(r)##addNotification({"message": message, "level": "success"});      
    }
};

let make = (_children) => {
    ...component,
    initialState: () => {_notificationSystem: ref(None) },
    reducer: (action, state) =>
        switch action {
            | AddNotification(message) =>  ReasonReact.SideEffects(((_) => addNotification(message, state)))
        },
    render: ({handle, reduce}) => (
    <div>             
        <ReactNotificationSystem ref=(handle(setNotificationSystemRef)) />
        <button onClick=(reduce( (_) => AddNotification("Hello"))) > (ReasonReact.stringToElement("Click")) </button> 
    </div>
  )
};
type action =
  | AddNotification of string
type state = {
  _notificationSystem: ReasonReact.reactRef option ref;}
let setNotificationSystemRef notificationRef { ReasonReact.state = state } =
  state._notificationSystem := (Js.Nullable.to_opt notificationRef)
let component = ReasonReact.reducerComponent "Notifications"
let addNotification message state =
  match !(state._notificationSystem) with
  | None  -> ()
  | ((Some (r))[@explicit_arity ]) ->
      (## (ReasonReact.refToJsObj r) addNotification)
        ([%bs.obj { message; level = "success" }])
let make _children =
  {
    component with
    initialState = (fun ()  -> { _notificationSystem = (ref None) });
    reducer =
      (fun action  ->
         fun state  ->
           match action with
           | ((AddNotification (message))[@explicit_arity ]) ->
               ((ReasonReact.SideEffects
                   (((fun _  -> addNotification message state))))[@explicit_arity
                                                                   ]));
    render =
      (fun { handle; reduce }  ->
         ((div
             ~children:[((ReactNotificationSystem.createElement
                            ~ref:(handle setNotificationSystemRef)
                            ~children:[] ())[@JSX ]);
                       ((button
                           ~onClick:(reduce
                                       (fun _  ->
                                          ((AddNotification ("Hello"))
                                          [@explicit_arity ])))
                           ~children:[ReasonReact.stringToElement "Click"] ())
                       [@JSX ])] ())[@JSX ]))
  }

Bindings

  • NotificationSystem

Project

Made with

Reason