Comments (9)
Interesting idea, I think there may be a cleaner way to achieve this though; something that preprocesses objects beforehand.
If you've got { "foo": true, "bar": false }
you want to turn it into { "foo": true, "no-bar": true }
then it can be passed in to classNames
as-is.
from classnames.
That would match with what I meant. I really don't think that the main modules public interface should be adjusted but that an additional function could be available who maps to the classNames
one. One can then just use a different require to use the different functionality.
I am not sure what would be the nicest function interface for this one though ... the one described initially would then just return a function which just maps over it's arguments and adds a prefixed version for each unprefixed key and then feeds the result into classNames
. The arguments to classnames
would then be something like this: {"foo": value1, "no-foo": !value1, "bar": value2, "no-bar": !value2}
.
What do you think?
from classnames.
What about another type of prefixing that's not a falsey prefix. For example:
// needs a better name...
classNamesPrefixedNotFalsy("herp-")({ foo: true, bar: true }); // => 'herp-foo herp-bar'
This would be an extremely useful use case for me in react-bootstrap. react-bootstrap/react-bootstrap#404 is one example. Note that I have applied a rather crude means to accomplish this here.
from classnames.
That seems a nice use case too. Unconditional prefixing. We need more names :-). Maybe we could generalize this into a formatting option for the list and integrate with some formatting options available (maybe someone wants prefixing ... someone wants suffixing ...)
from classnames.
@mtscout6 if the classnames would be available as a list rather than a string, wouldn't the prefixing be trivial by mapping over it?
@JedWatson , wouldn't using a list structure as a base make #18 more prettier/simpler to implement? You would then just have to throw one function into the mix which deduplicates a list/make the items unique. After that you would just have to join the items with a space.
from classnames.
@rmoorman we used an Array in previous versions but string concatenation provided an incredible improvement to execution speed. I'm normally all for flexibility in my packages but this one has become the de facto replacement for React's classnames utility and as such I'm being very careful to preserve performance. Also, you're likely to see a considerable number of executions in your app, so it has to scale.
@mtscout6 I get where you're coming from with classes in react-bootstrap. What if we added two methods, like this:
prefix(obj, truthyPrefix[, falsyPrefix])
- prefixes truthy keys inobj
with thetruthyPrefix
, optionally flips and prefixes falsy keys inobj
withfalsyPrefix
if it is providedprefix.falsy(obj, falsyPrefix)
- flips and prefixes falsy keys inobj
withfalsyPrefix
var classNames = require('classnames');
var prefix = require('classnames/prefix');
var c = { a: true, b: false };
classNames(prefix(c, 'pre-')); // "pre-a"
classNames(prefix.falsy(c, 'not-')); // "a not-b"
classNames(prefix(c, 'is-', 'not-')); // "is-a not-b"
Sounds like this would meet all the requirements I've heard without impacting the performance of complexity of classNames
itself.
Thoughts?
from classnames.
@JedWatson I can see where you are coming from wrt. execution performance. As far as flexibility is concerned, the proposed solution could indeed provide a lot of it (also for suffixing, general formatting). It looks like the prefix
and prefix.falsy
would need to know a lot about the implementation details of classNames though (given that the list is passed in as parameter to the prefix functions). How about passing in a function as first parameter to classnames which then takes care of formatting one each item?
var classNames = require('classnames');
var prefix = require('classnames/prefix');
var c = { a: true, b: false };
classNames(prefix("pre-"), c); // "pre-a"
classNames(prefix.falsy("not-"), c); // "a not-b"
classNames(prefix("is-", "not-"), c); // "is-a not-b"
The prefix function (or formatter for that matter) then just needs to receive the current item of the c
list while classNames is iterating over it's arguments.
Or maybe a little cleaner to implement, preserving the current public interface of classnames
var classNames = require('classnames');
var classNamesFormat = require('classnames/format');
var prefix = require('classnames/prefix');
var c = { a: true, b: false };
classNames(c); // "a"
classNamesFormat(prefix("pre-"), c); // "pre-a"
classNamesFormat(prefix.falsy("not-"), c); // "a not-b"
classNamesFormat(prefix("is-", "not-"), c); // "is-a not-b"
edit: add example for not changing interface of the classnames
function
from classnames.
Perhaps it might be easier to make prefix
work on the output, rather than the input.
from classnames.
This is something that can be done by the user.
from classnames.
Related Issues (20)
- Throwing an exception when accessing non-existent classes HOT 2
- why not using one build tool for publish the npm package? HOT 2
- Incomplete type signature for classnames/bind HOT 2
- Advanced typing for classnames/bind HOT 4
- Explain to me about "cx" HOT 1
- Getting error says 'this' context of type 'void' is not assignable HOT 4
- [Question] When I used Object's value to computed key, what happened? HOT 2
- SyntaxError: Unexpected end of script (Mobile Safari) HOT 5
- When no classes are selected, classNames should return null HOT 5
- Vulnerable dependencies (indirect security issues) HOT 1
- How to erase or replace the properties of the conditional class from external component? HOT 1
- why number can be a className HOT 1
- Can we add exports field for this package? HOT 4
- Need a maintainer? HOT 7
- Preparing for version 3.0 HOT 9
- Should we support CommonJS for 3.0? HOT 5
- No default export (v2.5.1) HOT 5
- Import from 'classnames' broken since v2.5.0 HOT 5
- Please use GitHub Releases HOT 6
- Unable to do v2 releases HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from classnames.