camelcase-css
Advanced tools
Package description
The camelcase-css npm package is designed to convert CSS property names from kebab-case to camelCase. This is particularly useful when working with CSS in JavaScript, such as when using inline styles in React components or when manipulating CSS properties through JavaScript. By converting CSS property names to camelCase, it aligns with the JavaScript naming conventions and allows for a more seamless integration of CSS styles within JavaScript code.
Converting CSS property names
This feature allows you to convert any CSS property from kebab-case to camelCase. For example, if you have a CSS property like 'margin-top', using camelcase-css, you can easily convert it to 'marginTop' which is the format expected by JavaScript for setting CSS properties.
"margin-top" => "marginTop"Batch conversion of CSS properties
In addition to converting individual CSS property names, camelcase-css can also handle objects containing multiple CSS properties. This is particularly useful when you have an object representing a style (e.g., for inline styles in React) and you need to ensure all property names are in camelCase.
{ 'margin-top': '20px', 'text-align': 'center' } => { marginTop: '20px', textAlign: 'center' }The change-case package provides a suite of utilities to convert strings between various cases, including camelCase. While it offers broader functionality for string case conversion beyond CSS property names, it requires more manual handling to specifically target CSS properties for conversion.
Similar to camelcase-css, to-camel-case is focused on converting strings to camelCase. However, it is a more general-purpose tool and does not specifically target CSS property names. Users would need to manually filter and apply it to CSS properties, making camelcase-css more convenient for CSS-related tasks.
Readme
Convert a kebab-cased CSS property into a camelCased DOM property.
Node.js >= 6 is required. Type this at the command line:
npm install camelcase-css
const camelCaseCSS = require('camelcase-css');
camelCaseCSS('-webkit-border-radius'); //-> WebkitBorderRadius
camelCaseCSS('-moz-border-radius'); //-> MozBorderRadius
camelCaseCSS('-ms-border-radius'); //-> msBorderRadius
camelCaseCSS('border-radius'); //-> borderRadius
FAQs
Convert a kebab-cased CSS property into a camelCased DOM property.
The npm package camelcase-css receives a total of 7,781,250 weekly downloads. As such, camelcase-css popularity was classified as popular.
We found that camelcase-css demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
The Socket Research team found this npm package includes code for collecting sensitive developer information, including your operating system username, Git username, and Git email.
Security News
OpenJS is warning of social engineering takeovers targeting open source projects after receiving a credible attempt on the foundation.
Company News
Come meet the Socket team at BSidesSF and RSA! We're sponsoring several fun networking events and we would love to see you there.