How to use cnbuilder - 10 common examples

To help you get started, we’ve selected a few cnbuilder examples, based on popular ways it is used in public projects.

github xobotyi / react-scrollbars-custom / tests / Scrollbar.spec.tsx View on Github external
renderer: props => (
              <span
                ref={props.elementRef}
                key={props.key}
                style={props.style}
                children={props.children}
                className={cnb("customTrackXClassName", props.className)}
              />
            )
          }}
github xobotyi / react-scrollbars-custom / tests / Scrollbar.spec.tsx View on Github external
renderer: props => (
              <span
                ref={props.elementRef}
                key={props.key}
                style={props.style}
                children={props.children}
                className={cnb("customContentClassName", props.className)}
              />
            )
          }}
github xobotyi / react-scrollbars-custom / tests / Scrollbar.spec.tsx View on Github external
renderer: props => (
              <span
                ref={props.elementRef}
                key={props.key}
                style={props.style}
                children={props.children}
                className={cnb("customThumbXClassName", props.className)}
              />
            )
          }}
github xobotyi / react-scrollbars-custom / tests / Scrollbar.spec.tsx View on Github external
renderer: props => (
              <span
                ref={props.elementRef}
                key={props.key}
                style={props.style}
                children={props.children}
                className={cnb("customWrapperClassName", props.className)}
              />
            )
          }}
github xobotyi / react-scrollbars-custom / tests / Scrollbar.spec.tsx View on Github external
renderer: props => (
              <span
                ref={props.elementRef}
                key={props.key}
                style={props.style}
                children={props.children}
                className={cnb("customThumbYClassName", props.className)}
              />
            )
          }}
github xobotyi / react-scrollbars-custom / tests / Scrollbar.spec.tsx View on Github external
renderer: props => (
              <span
                ref={props.elementRef}
                key={props.key}
                style={props.style}
                children={props.children}
                className={cnb("customTrackYClassName", props.className)}
              />
            )
          }}
github xobotyi / react-scrollbars-custom / src / Scrollbar.tsx View on Github external
const contentProps = {
      ...propsContentProps,
      key: "ScrollbarsCustom-Content",
      className: cnb("ScrollbarsCustom-Content", propsContentProps!.className),
      style: styles.content,
      children: createContext ? (
        <ScrollbarContext.Provider value={{ parentScrollbar: this }} children={children} />
      ) : (
        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)) {
github xobotyi / react-scrollbars-custom / src / Scrollbar.tsx View on Github external
)
    } 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;
github xobotyi / react-scrollbars-custom / src / Scrollbar.tsx View on Github external
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<React.ReactNode>;

    const contentProps = {
      ...propsContentProps,
      key: "ScrollbarsCustom-Content",
      className: cnb("ScrollbarsCustom-Content", propsContentProps!.className),
      style: styles.content,
      children: createContext ? (
        <ScrollbarContext.Provider value={{ parentScrollbar: this }} children={children} />
      ) : (
        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;
github xobotyi / react-scrollbars-custom / src / Scrollbar.tsx View on Github external
...((disableTracksMousewheelScrolling || disableTrackXMousewheelScrolling) && {
          onWheel: this.handleTrackXMouseWheel
        }),
        axis: AXIS_DIRECTION.X
      } as ScrollbarTrackProps;

      trackXProps.children = <ScrollbarThumb {...thumbXProps} />;
      holderChildren.push(<ScrollbarTrack {...trackXProps} />);
    } 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);
  }

cnbuilder

Yet another classname string builder (the fastest one)

MIT
Latest version published 9 months ago

Package Health Score

68 / 100
Full package analysis

Popular cnbuilder functions