Comments (9)
That would be great! If I could pass in some props that would override the CSS classes that could be an option?
from react-password-strength.
I’ll see if I have some time to in the next days. Say a flag that is unstyled
which is set to false
by default?
from react-password-strength.
Same issue, stupid thing is in my dev build my own css works, but in production the build-in css overrules my css (given its the last css file in line).
How about passing the id/class that is now set as static ('ReactPasswordStrength')?
So make it set that class by default, if you want to not use it or use your own you can set it via props?
<ReactPasswordStrength customStyle="true">
if customStyle is not present, just set the className as 'ReactPasswordStrength'.
if that prop is present, dont add 'ReactPasswordStrength' so your build-in css will not be used and people have to write their own css for the id that you can already set in the input props.
from react-password-strength.
Yeah I can understand the frustration if you dont want to use the default styles. Will look into providing a fix for this issue.
from react-password-strength.
I was thinking easiest thing to do is pass a flag if you want the default CSS or not. If you have time/interest feel free to submit a PR otherwise I'll implement when I have time (buried in work atm)
from react-password-strength.
On another hand, being able to apply a class to the input field would mean one could use their existing .input
class.
from react-password-strength.
As a quick fix, I'd suggest requiring that CSS is added manually as a separate import; that way it's easy to include / exclude styling as you wish.
from react-password-strength.
@luke-dare Im not a fan of that solution. Its a breaking change for something that shouldnt really need a breaking change and adds a second step to everyone who is using the tool as-is. Requiring CSS separately isnt something I've seen as a common practise.
Sorry I havent had time to look into this.. will see if I can find some time soon
from react-password-strength.
Took another look at the issues presented here, my feedback/response:
Right now there is no way to get the default CSS working without a lot of hard-coded when using a Bootstrap input
Integration with bootstrap (or any other css framework from a stylistic perspective) isnt a high priority for this. The goal is to have a super easy input component that rates password strength. I dont think the priority of bootstrap/foundation/etc integration will change in the future unfortunately.
RPS is an extremely simple component, the value it provides is the default styling that makes it easy to drop into a project. If you need more I would highly suggest implementing a custom component yourself in your project. Read the source code and you'll see how simple it is bc dropbox has done all the hard work with zxcvbn.
How about passing the id/class that is now set as static ('ReactPasswordStrength')?
So make it set that class by default, if you want to not use it or use your own you can set it via props?
This is the solution I've implemented to solve this through the namespaceClassName
prop. If you change that it will update all the internal class names to use it (ex: ReactPasswordStrength-strength-desc
becomes <namespaceClassName>-strength-desc
) and you can provide your own styles w/o conflicts.
If you are bothered by the orphaned CSS just import the universal JS module instead (see docs). I havent tested this recently but it should work just fine. I've also updated the examples with a custom CSS example, if you need to change much more than this I think you're better off implementing zxcvbn
in your project instead of using this tool.
Hope that helps!
from react-password-strength.
Related Issues (20)
- How to access ref to call clear HOT 5
- Allow passing additional dictionary words HOT 1
- Expose zxcvbn feedback object to result object through changeCallback HOT 3
- Support for material-ui HOT 3
- Support React 16 HOT 1
- Unable to set value - for multi step form HOT 7
- ReferenceError: self is not defined HOT 8
- The component is extremely slow on 50+ symbols HOT 1
- Unresolved module in build HOT 1
- Feature: password too long HOT 7
- onChange not working HOT 1
- Placeholder not being displayed HOT 1
- bundle very large HOT 4
- Unable to resolve module HOT 2
- Cannot pull latest 2.4.0 HOT 2
- Ability to add custom rules HOT 1
- Switch to asdfgh
- Override colors
- Support React 17
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 react-password-strength.