How to add css addition className to a component?

reasonreact

#1

Hi all
Does it exist a function, that I can add a addtional className to a component?
For example:

let component = ReasonReact.statelessComponent("NavItemView");

let make = (~id: string, ~text: string, active: option(string), children) => {
  ...component,
  render: (_self) => {

    let navItem = <li className="nav-item" id=id>
                    <a className="nav-link">
                      {children}
                      <span className="pl-3 nav-link-text">{ReasonReact.string(text)}</span>
                    </a>
                  </li>;

    switch active {
    | None =>
      navItem
    | Some(css) => 
      navItem
    };
  }
};  

If it is Some, then I would like add a className to navItem then it should looks like <li className="nav-item passedClassname".

Thanks


#2
let component = ReasonReact.statelessComponent("NavItemView");

let make = (~id: string, ~text: string, active: option(string), ~classes: string, children) => {
  ...component,
  render: (_self) => {

    let navItem = <li className={"nav-item " ++ classes}  id=id>
                    <a className="nav-link">
                      {children}
                      <span className="pl-3 nav-link-text">{ReasonReact.string(text)}</span>
                    </a>
                  </li>;

    switch active {
    | None =>
      navItem
    | Some(css) => 
      navItem
    };
  }
};  

There are options you can use as well. You can make a utility function to parse an array in to a string, you could use the re-classnames library, do what I did, etc.


#3

@bifunctor, I am using re-classnames and it works for me! You can use Cn.ifSome in your case!