How to use the classnames.bind function in classnames

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

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github cockroachdb / cockroach-gen / pkg / ui / src / views / sessions / sessionDetails.tsx View on Github external
import {Col, Row} from "antd";
import {nodeDisplayNameByIDSelector} from "src/redux/nodes";
import {NodeLink, StatementLinkTarget} from "src/views/statements/statementsTableContent";
import TerminateSessionModal, {TerminateSessionModalRef} from "src/views/sessions/terminateSessionModal";
import TerminateQueryModal, {TerminateQueryModalRef} from "src/views/sessions/terminateQueryModal";

interface OwnProps {
  id: string;
  nodeNames: { [nodeId: string]: string };
  session: SessionInfo;
  sessionError: Error | null;
  refreshSessions: typeof refreshSessions;
}

const cx = classNames.bind(styles);
const summaryCardStylesCx = classNames.bind(summaryCardStyles);

export type SessionDetailsProps = OwnProps & RouteComponentProps;

function yesOrNo(b: boolean) {
  return b ? "Yes" : "No";
}

export const MemoryUsageItem: React.FC<{
  alloc_bytes: Long
  max_alloc_bytes: Long,
}> = ( {alloc_bytes, max_alloc_bytes}) => (
github canisminor1990 / ffxiv-cmskin / src / routes / Setting / pageComment / Comment.js View on Github external
render() {
    const { className, ...other } = this.props;
    return (
      <div>
        <div id="editor">
      </div>
    );
  }
}</div>
github cockroachdb / cockroach-gen / pkg / ui / src / views / sessions / sessionDetails.tsx View on Github external
import {Bytes, DATE_FORMAT} from "src/util/format";
import {Col, Row} from "antd";
import {nodeDisplayNameByIDSelector} from "src/redux/nodes";
import {NodeLink, StatementLinkTarget} from "src/views/statements/statementsTableContent";
import TerminateSessionModal, {TerminateSessionModalRef} from "src/views/sessions/terminateSessionModal";
import TerminateQueryModal, {TerminateQueryModalRef} from "src/views/sessions/terminateQueryModal";

interface OwnProps {
  id: string;
  nodeNames: { [nodeId: string]: string };
  session: SessionInfo;
  sessionError: Error | null;
  refreshSessions: typeof refreshSessions;
}

const cx = classNames.bind(styles);
const summaryCardStylesCx = classNames.bind(summaryCardStyles);

export type SessionDetailsProps = OwnProps &amp; RouteComponentProps;

function yesOrNo(b: boolean) {
  return b ? "Yes" : "No";
}

export const MemoryUsageItem: React.FC&lt;{
  alloc_bytes: Long
  max_alloc_bytes: Long,
}&gt; = ( {alloc_bytes, max_alloc_bytes}) =&gt; (
github Azure / iot-ux-fluent-controls / packages / fluent-controls / src / components / Button / Button.tsx View on Github external
import * as React from 'react';
import * as classnames from 'classnames';
import {DivProps, SpanProps, ButtonProps as AttrButtonProps, Elements as Attr} from '../../Attributes';
import {Icon, IconSize, IconAttributes} from '../Icon';
const css = classnames.bind(require('../../Button.scss'));

export interface ButtonComponentType {}

export interface ButtonAttributes {
    container?: AttrButtonProps;
    icon?: SpanProps;
}

export interface ButtonProps extends React.Props {
    /** Button title attribute */
    title?: string;
    /** Button type attribute */
    type?: string;
    /** Icon name (from Segoe UI MDL font) */
    icon?: string;
    /** Use primary style */

classnames

A simple utility for conditionally joining classNames together

MIT
Latest version published 3 months ago

Package Health Score

91 / 100
Full package analysis