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 slidewiki / slidewiki-platform / components / User / UserNotificationsPanel / UserNotificationsItem.js View on Github external
{'made changes in ' + notification.content_kind + ': '}
                        <a href="{viewPath}">{cheerioContentName}</a>
                    
                );
                break;
            default:

        }

        let markAsReadButton = (notification.new) ? (<button title="Mark as read" tabindex="0" aria-label="Mark as read">) : '';
        let buttons = (
            
                {markAsReadButton}
                </button><button title="Delete" tabindex="0" aria-label="Delete">
            );
        let itemClass = classNames({
            'event': true,
            'ui raised segment': notification.new
        });
        return (
            
                
                
                    
                        {summaryNotification} {buttons}
                    
                    
                        {DateDiv}
                    
                
            
        );</button>
github tengge1 / ShadowEditor / ShadowEditor.Web / src / ui / table / TableRow.jsx View on Github external
render() {
        const { className, style, children, ...others } = this.props;

        return 
            {children}
        ;
    }
}
github tengge1 / ShadowEditor / ShadowEditor.UI / src / form / IconButton.jsx View on Github external
render() {
        const { className, style, icon, title, selected, onClick } = this.props;
        return <button title="{title}" style="{style}" selected="">
            <i></i>
        </button>;
    }
}
github tengge1 / ShadowEditor / ShadowEditor.Web / src / ui / tree / Tree.jsx View on Github external
createNode(data) {
        const leaf = !data.children || data.children.length === 0;

        const children = leaf ? null : <ul>{data.children.map(n =&gt; {
            return this.createNode(n);
        })}</ul>;

        let checkbox = null;

        if (data.checked === true || data.checked === false) {
            checkbox = ;
        }

        return
github interledger-deprecated / ilp-kit / client / src / components / Input / Input.js View on Github external
renderInputContainer () {
    const { meta, label, disabled } = this.props

    return (
      <div disabled="">
        <label>{label}</label>

        {this.renderInput()}
      </div>
    )
  }
github gnosis / safe-react / src / routes / safe / components / Settings / ManageOwners / ReplaceOwnerModal / screens / OwnerForm / index.jsx View on Github external
Review the owner you want to replace from the active Safe. Then specify the new owner you want to
                    replace it with:
                  
                
                
                  Current owner
                
                
                  
                    
                  
                  
                    
                      
                        {ownerName}
                      
                      
                        
                          {ownerAddress}
                        
                        
                        
                      
                    
                  
                
                
                  New owner
github tengge1 / ShadowEditor / ShadowEditor.Web / src / ui / form / FormControl.jsx View on Github external
render() {
        const { className, style, children, hidden } = this.props;

        return <div style="{style}" hidden="">
            {children}
        </div>;
    }
}
github ali1k / ld-r / components / dataset / ResourceList.js View on Github external
list = this.props.resources.map((node, index) => {
                title = node.title
                    ? node.title
                    : (node.label
                        ? node.label
                        : URIUtil.getURILabel(node.v));
                image = node.image ? node.image : '';
                geo = node.geo ? node.geo : '';
                itemClass = classNames({
                    'ui': true,
                    'item fadeIn': true,
                    'animated': !cloneable
                });
                if (!self.props.enableAuthentication) {
                    dbClass = 'black cube icon';
                    if (self.props.config && typeof self.props.config.readOnly !== 'undefined' && !self.props.config.readOnly) {
                        dbClass = 'green cube icon';
                    }
                } else {
                    userAccess = node.accessLevel;
                    if (userAccess.access) {
                        if (userAccess.type === 'full') {
                            dbClass = 'green cube icon';
                        } else {
                            dbClass = 'yellow cube icon';
github GigaTables / reactables / src / components / table / Footer.js View on Github external
render() {
        const {
            children,
            gteRowId,
        } = this.props;

        let rowClasses = classNames({
            footer: true,
        });
        return (
            {children}
        )
    }
}
github gauravtiwari / relay-rails-blog / client / app / bundles / PostsIndex / components / PostPreview.jsx View on Github external
render() {
    const { post } = this.props;
    const voted = classNames({
      'fa fa-thumbs-up voted': this.props.post.voted,
      'fa fa-thumbs-o-up': !this.props.post.voted,
    });

    const tags = post.tags.map((tag) =&gt; {
      return (<a href="{Routes.tag_path(tag)}">{tag}</a>);
    });

    return (
        <div>
          <a href="{Routes.post_path(post.id)}">
            <h2>
              {post.title}
            </h2>
          </a>
          <div></div></div>

classnames

A simple utility for conditionally joining classNames together

MIT
Latest version published 4 months ago

Package Health Score

94 / 100
Full package analysis