Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
classnames-components
Advanced tools
Readme
A CSS class component wrapper to speed up styling React components
Heavily inspired by the great css-in-js library styled-components, all credits where credits due. This module is a component wrapper around classnames.
This project is README-driven and WIP. The basic functionality works.
yarn add classnames-components
or
npm i classnames-components
You can play around with a CodeSandbox example here.
Because we're using classnames, you have a lot of flexibility.
import cc from 'classnames-components';
// using arguments
const Header = cc('h1')('font-sans', 'text-3xl');
// using an array
const Intro = cc('p')(['font-serif', 'text-base', 'leading-relaxed']);
// using a string
const Wrapper = cc('section')('container mx-auto px-4');
// using an object
const Button = cc('button')({
'color-gray-500': true,
'font-serif': true,
});
const MyComponent = () => (
<Wrapper>
<Header>A title</Header>
<Intro>A nice intro</Intro>
<Button>Ok</Button>
</Wrapper>
);
export default MyComponent;
more examples here
Props are available by using a function as second param.
const Button = cc('button')(props => [
'font-serif',
{
'color-red-500': props.type === ButtonType.ERROR,
'color-gray-500': props.type === ButtonType.DEFAULT,
},
]);
const MyComponent = () => (
<Wrapper>
<Button type={ButtonType.ALERT}>An alert button</Button>
<Button type={ButtonType.DEFAULT}>A default button</Button>
</Wrapper>
);
export default MyComponent;
const Text = cc('p')('font-sans');
// create a new classnames-component starting from Text
const Paragraph = cc(Text)('text-base leading-relaxed');
You can use as
to overwrite the semantics of the element.
const Text = cc('p')('font-sans');
const MyComponent = props => <Text {...props} as={'div'} />;
export default MyComponent;
MIT
FAQs
A CSS class component wrapper to speed up styling React components
The npm package classnames-components receives a total of 8 weekly downloads. As such, classnames-components popularity was classified as not popular.
We found that classnames-components 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.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.