npmpackage.info

Gathering detailed insights and metrics for prefix-classnames

Other packages similar to prefix-classnames

classnames-prefix

0.0.4

BEM sugar ontop of `JetWatson/classnames`. Simple prefixer for classnames. A simple utility for conditionally joining classNames together

@sajadevo/prefix-classnames

1.0.2

Automatically add prefix to your project classnames.

@umbrellio/prefix-classnames

1.0.2

Prefix classnames library

with-classname-prefix

2.0.0

A simple function to add prefix to classnames.

Gathering detailed insights and metrics for prefix-classnames

prefix-classnames - 0.0.7 | npmpackage.info

prefix-classnames

classnames with prefix

0.0.7

TypeScript

588.00 B

38,753 2

Installations

npm install prefix-classnames

Developer Guide

BETA

Typescript

Yes

Module System

CommonJS

Node Version

16.18.0

NPM Version

9.2.0 Score

68.2

Supply Chain

89.5

Quality

75.5

Maintenance

100

Vulnerability

100

License

Pull Requests

Open

3

Total

18

Closed

9

Merged

6

Issues

Open

0

Total

0

Closed

0

Releases

Unable to fetch releases

Languages

TypeScript

TypeScript (100%)

Developer

NicoKam

Download Statistics

Total Downloads

38,753

Last Day

Last Week

Last Month

512

Last Year

10,403

GitHub Statistics

3 Stars

28 Commits

1 Forks

1 Watchers

4 Branches

1 Contributors

Updated on Jun 10, 2025

Bundle Size

1.11 kB

Minified

588.00 B

Minified + Gzipped

Bundlephobia

Maintainers

View All 1 Contributors

Package Meta Information

Latest Version

0.0.7

Package Id

prefix-classnames@0.0.7

Unpacked Size

5.57 kB

Size

1.81 kB

File Count

NPM Version

9.2.0

Node Version

16.18.0

Total Downloads

Cumulative downloads

Total Downloads

38,753

Dependencies

classnames

Dev Dependencies

@types/jest jest rimraf ts-jest typescript

prefix-classnames

classnames with prefix

You should know 'classnames' before use this tool.

Usage

1import pc from 'prefix-classnames';
2
3const px = pc('prefix');
4
5px(); // 'prefix'
6px('root'); // 'prefix-root'
7px({ root: true }); // 'prefix-root'
8px('a', 'b', 'c'); // 'prefix-a prefix-b prefix-c'
9px(['a', 'b', 'c']); // 'prefix-a prefix-b prefix-c'
10px('a', { bb: true, cc: false, dd: true }); // 'prefix-a prefix-bb prefix-dd'
11px(null, false, 'bar', undefined, 0, 1, { baz: null }, ''); // 'prefix-bar prefix-1'
12px(['a', ['b', { c: 1, d: false }, ['e', { f: true }, 'g']]]); // 'prefix-a prefix-b prefix-c prefix-e prefix-f prefix-g'

Demo

You can use prefix-classnames in your React Component like this.

style:

1@prefix: my-special-component-prefix;
2
3.@{prefix}- {
4  &root{
5
6  }
7
8  &dark-mode{
9
10  }
11
12  &header{
13
14  }
15
16  &body{
17
18  }
19}
20

component:

1import React from 'react';
2import pc from 'prefix-classnames';
3import 'MyComponent.less'; // no css-modules
4
5// class prefix
6const px = pc('my-special-component-prefix');
7
8export default class MyComponent{
9  render(){
10    const { darkMode } = this.props;
11    return(
12      <div className={px('root', {['dark-mode']: darkMode})}>
13        <div className={px('header')}>
14          Component Header
15        </div>
16        <div className={px('body')}>
17        </div>
18      </div>
19    );
20  }
21}
22

No vulnerabilities found.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

5

Maintained

Determines if the project is "actively maintained".

0

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

License

Determines if the project has defined a license.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Score

2

/10

Last Scanned on 2025-06-30

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

Other packages similar to prefix-classnames

Other packages similar to prefix-classnames

prefix-classnames

Installations

Developer Guide

Yes

CommonJS

16.18.0

9.2.0

Score

Pull Requests

3

18

9

6

Issues

0

0

0

Releases

Unable to fetch releases

Languages

Developer

NicoKam

Download Statistics

GitHub Statistics

Bundle Size

1.11 kB

588.00 B

Maintainers

Package Meta Information

Total Downloads

38,753

Dependencies

Dev Dependencies

prefix-classnames

Usage

Demo

10

5

0

0

0

0

0

0

0

0

2

/10

Weekly Downloads

Monthly Downloads

Yearly Downloads