How to use cnbuilder - 10 common examples

renderer: props => (
              <span style="{props.style}">
            )
          }}</span>

renderer: props => (
              <span style="{props.style}">
            )
          }}</span>

renderer: props => (
              <span style="{props.style}">
            )
          }}</span>

renderer: props => (
              <span style="{props.style}">
            )
          }}</span>

renderer: props => (
              <span style="{props.style}">
            )
          }}</span>

renderer: props => (
              <span style="{props.style}">
            )
          }}</span>

const contentProps = {
      ...propsContentProps,
      key: "ScrollbarsCustom-Content",
      className: cnb("ScrollbarsCustom-Content", propsContentProps!.className),
      style: styles.content,
      children: createContext ? (
        
      ) : (
        children
      )
    } as ElementPropsWithElementRefAndRenderer;

    const scrollerProps = {
      ...propsScrollerProps,
      key: "ScrollbarsCustom-Scroller",
      className: cnb("ScrollbarsCustom-Scroller", propsScrollerProps!.className),
      style: styles.scroller,
      children: renderDivWithRenderer(contentProps, this.elementRefContent),
      onScroll: this.handleScrollerScroll
    } as ElementPropsWithElementRefAndRenderer;

    const wrapperProps = {
      ...propsWrapperProps,
      key: "ScrollbarsCustom-Wrapper",
      className: cnb("ScrollbarsCustom-Wrapper", propsWrapperProps!.className),
      style: styles.wrapper,
      children: renderDivWithRenderer(scrollerProps, this.elementRefScroller)
    } as ElementPropsWithElementRefAndRenderer;

    holderChildren.push(renderDivWithRenderer(wrapperProps, this.elementRefWrapper));

    if (this.state.trackYVisible || (!removeTracksWhenNotUsed && !removeTrackYWhenNotUsed)) {

)
    } as ElementPropsWithElementRefAndRenderer;

    const scrollerProps = {
      ...propsScrollerProps,
      key: "ScrollbarsCustom-Scroller",
      className: cnb("ScrollbarsCustom-Scroller", propsScrollerProps!.className),
      style: styles.scroller,
      children: renderDivWithRenderer(contentProps, this.elementRefContent),
      onScroll: this.handleScrollerScroll
    } as ElementPropsWithElementRefAndRenderer;

    const wrapperProps = {
      ...propsWrapperProps,
      key: "ScrollbarsCustom-Wrapper",
      className: cnb("ScrollbarsCustom-Wrapper", propsWrapperProps!.className),
      style: styles.wrapper,
      children: renderDivWithRenderer(scrollerProps, this.elementRefScroller)
    } as ElementPropsWithElementRefAndRenderer;

    holderChildren.push(renderDivWithRenderer(wrapperProps, this.elementRefWrapper));

    if (this.state.trackYVisible || (!removeTracksWhenNotUsed && !removeTrackYWhenNotUsed)) {
      const thumbYProps = {
        ...propsThumbYProps,
        key: "ScrollbarsCustom-ThumbY",
        style: styles.thumbY,
        elementRef: this.elementRefThumbY,
        onDrag: this.handleThumbYDrag,
        onDragEnd: this.handleThumbYDrag,
        axis: AXIS_DIRECTION.Y
      } as ScrollbarThumbProps;

children: renderDivWithRenderer(contentProps, this.elementRefContent),
        renderer: propsScrollerProps!.renderer,
        elementRef: propsScrollerProps!.elementRef
      } as ElementPropsWithElementRefAndRenderer;

      return renderDivWithRenderer(scrollerProps, this.elementRefScroller);
    }

    const styles = Scrollbar.calculateStyles(this.props, this.state, this.scrollValues, scrollbarWidth);

    const holderChildren = [] as Array;

    const contentProps = {
      ...propsContentProps,
      key: "ScrollbarsCustom-Content",
      className: cnb("ScrollbarsCustom-Content", propsContentProps!.className),
      style: styles.content,
      children: createContext ? (
        
      ) : (
        children
      )
    } as ElementPropsWithElementRefAndRenderer;

    const scrollerProps = {
      ...propsScrollerProps,
      key: "ScrollbarsCustom-Scroller",
      className: cnb("ScrollbarsCustom-Scroller", propsScrollerProps!.className),
      style: styles.scroller,
      children: renderDivWithRenderer(contentProps, this.elementRefContent),
      onScroll: this.handleScrollerScroll
    } as ElementPropsWithElementRefAndRenderer;

...((disableTracksMousewheelScrolling || disableTrackXMousewheelScrolling) && {
          onWheel: this.handleTrackXMouseWheel
        }),
        axis: AXIS_DIRECTION.X
      } as ScrollbarTrackProps;

      trackXProps.children = ;
      holderChildren.push();
    } else {
      this.elementRefTrackX(null);
      this.elementRefThumbX(null);
    }

    const holderProps = {
      ...propsHolderProps,
      className: cnb(
        "ScrollbarsCustom",
        this.state.trackYVisible && "trackYVisible",
        this.state.trackXVisible && "trackXVisible",
        this.state.isRTL && "rtl",
        propsHolderProps.className
      ),
      style: styles.holder,
      children: holderChildren
    } as ElementPropsWithElementRefAndRenderer;

    return renderDivWithRenderer(holderProps, this.elementRefHolder);
  }