Allow customize own checkbox: change css to remove the border-radius, centering the check icon, change border-size

[Trispa]

[jakezatecky]

Hellow @Trispa. Sorry for the late reply.

The checkboxes are just Font Awesome icons, which I cannot directly change in terms of border radius, size, and so on. I suppose I could role out my own custom checkboxes, but honestly making pretty icons in HTML is not my strong suit.

You do have a couple options, however.

If you prefer the native browser icons you can pass in the nativeCheckboxes property, and the Font Awesome checkboxes will no longer appear.

The other option is to override the CSS that uses Font Awesome. Currently, the following CSS dictates the icons used for the checkboxes:

.rct-icon {
  font-family: "FontAwesome";
  font-style: normal;
}

.rct-icon-uncheck::before {
  content: "\f096";
}

.rct-icon-check::before {
  content: "\f046";
}

If you have the luxury of using a font set that has other icons, you can change the font family and use whatever character that font uses for the checked/unchecked icons.

[Trispa]

Yeah, thanks @jakezatecky that's what i finally did. i changed the Font-Awesome in react-checkbox-tree.css.
But i still not 100% fix my issue. My concerne was to be able to customize the checkbox as a component, so i could design it like i want.

[jakezatecky]

I suppose I could add an additional property to the tree allowing the specification of all icon components, such as:

<CheckboxTree
  ...
  icons={{
    check: <span className="rct-icon rct-icon-check" />,
    uncheck: <span className="rct-icon rct-icon-uncheck" />,
    halfCheck: <span className="rct-icon rct-icon-half-check" />,
    expandClose: <span className="rct-icon rct-icon-expand-close" />,
    expandOpen: <span className="rct-icon rct-icon-expand-open" />,
  }}
/>

There you would have component-level control on the various icons and could build your own complex component. Would that satisfy your needs? If so, it is rather trivial for me to add.

[Trispa]

That's exactly what I need @jakezatecky . let's give more details. For example:
Here is my checkbox component

const CustomeCheckbox = (props) => (
     <div className={checkboxCssClass}>
     {
       props.checked ? <i className={"checkBoxContent  fa " + props.fontLabel} ></i> : null
     }
      </div>
 )

Instead-of using default check icon (fa-check), i can have any icon a want (ie: fa-minus, fa-stop) in the div (checkbox square) content. And i can also customize my square by changing border radius, size vis checkboxCssClass etc...

and from that i can isealy use your suggestion by doing that:

<CheckboxTree
  ...
  icons={{
    check: <CustomeCheckbox checked={true}  fontLabel ="fa-minus" .../>,
    uncheck: <CustomeCheckbox checked={false} .../>,
    ...  
  }}
/>

Hope you get my point.

[Trispa]

@jakezatecky given that it is rather trivial for you :) , can you tell me when will it be available?

[jakezatecky]

I will likely add it tomorrow, but may release a new version later in the week.

[Trispa]

Hello @jakezatecky I updated the react-checkbox-tree from 1.2.3 to the latest 1.2.4 but it not reflects the new feature.
I tried this :

<CheckboxTree
   icons={{
          parentClose: <span className="rct-icon rct-icon-parent-close" />,
          parentOpen: <span className="rct-icon rct-icon-parent-close" />,
   }}
/>

for the test, I kept the same icons "rct-icon-parent-close" for both parentClose and parentOpen but I still get the old behavior( default icons ). Is there anything i missed?

thanks in advance

[jakezatecky]

v1.2.4 is a patch release containing bug fixes and was released before this feature was implemented. The icons prop is slated for the v1.3.0 release, which is due later this week.

If you do not want to wait until the stable release is made available, you can always point npm to use the v1.3-dev branch of the project:

{
  "react-checkbox-tree": "jakezatecky/react-checkbox-tree#v1.3-dev"
}

[Trispa]

oh okay sorry. Then I will wait thanks