Comments (22)
I need this too.
from formsy-react-components.
Why not just create your own component for this?
from formsy-react-components.
It's not that hard to add custom classNames to a row in the current source. Currently I'm just wrapping the few things I need to class at that level in an unneeded div.
ReactBootstrap does it: https://github.com/react-bootstrap/react-bootstrap/blob/master/src/InputBase.js#L130
from formsy-react-components.
That’s what I wound up doing.
Initially I thought of this library as a standalone, but it seems more like a good piece of inspiration to start rolling your own components.
Happy to close this.
On Jun 16, 2015, at 3:02 PM, Dmitry Semigradsky [email protected] wrote:
Why not just create your own component for this?
—
Reply to this email directly or view it on GitHub #12 (comment).
from formsy-react-components.
@ericdfields Thanks for the feedback... It's always been at the back of my mind that we should be able to customise various classnames. Initially I just chose the bootstrap column classnames so that it 'just worked' with the plain vanilla bootstrap CSS. I didn't fancy having to require users add any custom stylesheets.
Also, I think you're right about treating this a point of inspiration. It's possible to that there may still be useful bits you could use when creating your own component, see the mixins for instance.
from formsy-react-components.
I personally would leave the bootstrap classnames but often you want to ad a few extra styles to a one off component. Would much prefer merging the styles, although extending this and writing my own might also work. Thanks, Andy.
from formsy-react-components.
I think if we allow customising, we should allow overwriting the defaults that I arbitrarily hard coded ;-) They "work for me", but I can see it might be annoying if you wanted to used another set of bootstrap column widths, for example. We could explain how retain the original classnames in the mythical(!) docs.
I'm thinking that row and element wrapper classes could be set at the form level, rather than individually on a "component by component" basis (then allow overriding in components). If you still needed to create custom components, the form-level custom classnames could possibly be accessed by using the ComponentMixin.
Probably best to go with allowing to pass a string or array of classnames to allow most flexibility (especially to allow using the unmodified bootstrap stylesheets and bootstrap column widths for a responsive layout).
from formsy-react-components.
Reopening this, as I think it we should allow customising some of the classnames.
from formsy-react-components.
I hadn't thought of setting the row and el classes on the form level, but I like that a lot.
I would leverage https://github.com/JedWatson/classnames to compose the classnames of multiple elements. In my experience, you can throw any combination of arrays, objects ({extraClass: this.props.useExtraClass}), and strings and get a proper class string.
from formsy-react-components.
Thanks @ericdfields for the https://github.com/JedWatson/classnames recommendation. The dedupe option looks good for (optionally) allowing removal of the default classes, while keeping it simple to add extra classes.
from formsy-react-components.
@ericdfields I've needed this too, so I've created it here erzzo@e832f7a. I hope this is what you meant.
Now I use it this way
<Input type="text" name="name" label="name:" labelClassName="col-md-4" wrapperClassName="col-md-8"/>
from formsy-react-components.
This does look like something I would use as well. @erzzo I like your implementation. Could we merge that into the master? Wouldn't break anything and gives people a little more flexibility.
from formsy-react-components.
Although I have a different case where I don't want the form to have a .row
class but would like it to have a wrapper class. So maybe setting it at a form level would be good or changing it so we can overwrite all the classes on the input.
from formsy-react-components.
Hi, I've gone ahead and added @erzzo's implementation, it should solve the problem for most people. Thank you @erzzo for that!
I think maybe allowing all classnames to be set and running them all through https://github.com/JedWatson/classnames is an inevitable next step, as it should still allow for sensible defaults, while also allowing any classname manipulation. Downsides to this are increased filesize for this component (we'd be adding another dependency), and the dedupe option may harm performance (if there are lots of components / classes).
@wkerswell I'm looking into enabling changing the wrapper class, watch this space!
from formsy-react-components.
I have added a custom layout type so that all the wrapper classes can be changed. I will submit a PR so you can see if it is something that would be useful or not.
from formsy-react-components.
Here is the PR #27 Hope it went ok got some merge conflicts from the branch being updated...
from formsy-react-components.
Thanks for that. Have just been noodling about on a similar approach, will have a look later. Cheers.
from formsy-react-components.
Hi there. In 61b5fcd i've added the ability to add or remove classes from the Row element, see the playground example for details.
(I'd come up with something quite similar to #27 -- which I think I'll close now, although I will take away the idea of adding a 'custom' layout type. The way that we implement layouts should probably be refactored anyway.)
I'd also like to add the ability to change these class name properties at the form level. This will likely be similar to the implementation for the layout property (see the parent context mixin and component mixin for examples) -- although, I won't be able to begin this until the start of next week.
from formsy-react-components.
Awesome thanks. I cant seem to see the version 0.5.0 on npm have you updated it?
from formsy-react-components.
Just published it.
from formsy-react-components.
FYI:
The className you have to put in case you want to overwrite is elementWrapperClassName and not wrapperClassName. @erzzo
Thank you also for making this feature!
from formsy-react-components.
@cornerolive Thanks for pointing that out. I've added a page in the wiki with a bit more detail.
from formsy-react-components.
Related Issues (20)
- React 16.1.1, Formsy 1.1: mixins problem HOT 4
- No Negative Numbers in Input HOT 4
- Change label prop to support PropTypes.node HOT 3
- Doubt/Feature: Prevent Select setValue HOT 2
- wrong install documentation ?
- Overriding icons HOT 1
- React.createElement: Type is invalid when creating a Form HOT 1
- Input component with numeric/alphanumeric/alpha value restriction HOT 2
- Select with numerical values HOT 1
- validatePristine textarea not displaying validation error HOT 4
- render elements within 'form-group'
- onChange is called before the value has been set on formsy
- Does this work with bootstrap 4? HOT 1
- New package release request HOT 2
- Refactor UNSAFE_componentWillReceiveProps
- Build correct releases HOT 5
- Editable input for Select component HOT 2
- Release of 2.0.0 - what remains? HOT 1
- add support for 2.1.0. and higher versions of formsy-react HOT 1
- Publish latest fixes to npm
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 formsy-react-components.