rebassjs / rebass Goto Github PK
View Code? Open in Web Editor NEW:atom_symbol: React primitive UI components built with styled-system.
Home Page: https://rebassjs.org
License: MIT License
:atom_symbol: React primitive UI components built with styled-system.
Home Page: https://rebassjs.org
License: MIT License
Seems clear how to use rebass in the node environment, but I'd like it made clearer how to use it on the client side.
With support for:
Using Babel and ES6 is awesome. Rebass should use it! Happy to provide a PR if it's a direction you'd like to take it.
it would be nice to be able to do this
import { Input } from 'rebass'
// blah blah
<CustomInput
type='whatever'
style={{
...Input.style,
customThing: 123
}}
/>
open to a PR for lists + different list items?
The example in the README declares class App and uses root element of . This is confusing! Maybe it should use <Container>
instead?
class App extends React.Component {
render () {
return (
<App> ...
I really like the minimalist approach of this lib after ditching material-ui
.
I have a proposal to make the components even more easier to read:
Given the current state
<Flex
align="center"
justify="space-between"
wrap={true}
>
What do you think about:
<Flex center space-between wrap>
Would that make sense?
What is the best approach for setting a default style on complex components? In other words, how do I add a global style for the help text underneath an <Input />
control?
This happens on Node 0.12.7 + Babel 6
Seems to be resolved after switching to Node 5.7
I think it has to do with the way things are exported in index.js
var _ = require('.');
npm ERR! peerinvalid The package [email protected] does not satisfy its siblings' peerDependencies requirements!
npm ERR! peerinvalid Peer [email protected] wants react@^15.0.1
npm ERR! peerinvalid Peer [email protected] wants react@^0.14.0
I'm getting this error while I'm trying install rebass to my React project. Is there any chance to fix this?
Hi,
i was wondering if there is any way to use a font from a npm module?
Greetz,
boristian
@jxnblk: Thank you for sharing your work., it's awesome.
Is there a place to look to see changes?
Chromium (37) and Firefox (31) on Travis are oldish and complain that Object.assign is not a function
: https://travis-ci.org/the-grid/ed/builds/115555196#L962
I'll see if this polyfill helps: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign#Polyfill
same as #48, but for LinkBlock
instead of NavItem
import { Link } from 'react-router';
// ...
<LinkBlock Component={Link} to='/'>Home</LinkBlock>
console warning:
Warning: Failed propType: Invalid prop `Component` supplied to `LinkBlock`, expected a ReactNode. Check the render method of `Root`.
This line was giving me an error.
Adding "colors.css": "^2.3.0"
to package.json
fixed it
Hey @jxnblk, awesome library!
When using the <Input />
component, event handlers always get called twice. This is because you capture all events into rootProps
and after that you apply them to two <Base />
components
const {
rounded,
backgroundColor,
theme,
inverted,
// event handlers go into this variable
...rootProps
} = props
// later
<Base
// applies onClick, onBlur etc.
{...rootProps}
>
// applies onClick, onBlur etc. again
<Base
{...props}
type='input'
>
</Base>
</Base>
My best advice is to switch to something like a rootProps
prop on Input
and then delegate the rest of the props to the Input
component. I can create a pull request if you agree with that.
const Input = ({
label,
name,
type,
message,
hideLabel,
children,
rootProps,
...props
}, { rebass }) => {
const {
rounded,
backgroundColor,
theme,
inverted
} = props
return (
<Base
{...rootProps}
>
<Base
{...props}
/>
{message && <Text small children={message} />}
</Base>
)
}
Another option would be to filter out all events and delegate them to the second <Base />
. This would require a list of events though.
EDIT: Same problem exists for <Select />
First, Thanks for the awesome work.
Even tho the components you've written are all stateless components, they are still not treated as pure by React; which means that React will re-render them all even tho their props did not change.
I understand that Layout components like Container, Box should not behave this way otherwise child components would not be rendered at all. but leaf components such as Button etc would benefit from it ?
On way we could get around this here would be to implement the shouldComponentUpdate method and do a shallowCompare of the props.
All code examples show minified tags, e.g. http://jxnblk.com/rebass/#Col:
<t>
<t
sm={6}
md={4}
lg={3}>
Col sm6 md4 lg3
</t>
<t
sm={6}
md={4}
lg={3}>
Col sm6 md4 lg3
</t>
<t
sm={6}
md={4}
lg={3}>
Col sm6 md4 lg3
</t>
<t
sm={6}
md={4}
lg={3}>
Col sm6 md4 lg3
</t>
<t
sm={6}
md={4}
lg={3}>
Col sm6 md4 lg3
</t>
<t
sm={6}
md={4}
lg={3}>
Col sm6 md4 lg3
</t>
</t>
Firstly, love what you've done here and really appreciate your efforts. I can see this being very useful. I'd love to see a react-native version.
For things like InputRange, shouldn't there be a callback function, something like onValueChange={ val => console.log(val) }
to report the value back up to the parent component?
Should be z-index
Made a fork to submit PR but was trying to get the demo to run to check but was getting
ERROR in ../src/index.js
Module not found: Error: Cannot resolve module 'babel'
Would it not be nice to be able to pass down classNames on components so you don't have to wrap the components with another block just to put a className on it?
For example:
<Toolbar className="Nav" color="white"></Toolbar>
instead of:
<nav className="Nav">
<Toolbar color="white"></Toolbar>
</nav>
I would be willing to submit a PR to address this if this is a legitimate issue and not just how you explicitly designed the components.
Thanks!
Andy
Would you be open to a component called Step
(or something similar) that can be used as children to SequenceMap
instead of a steps
property with a custom DSL?
Chrome 49.0.2623.75 (Official Build) (64-bit)
There is a typo on link to jxnblk.com/rebass on https://github.com/jxnblk/rebass/blob/master/README.md .
First issue is that in package.json you reference
"basscss.github.io": "github:basscss/basscss.github.io"
but since its ssh version only you get access. So npm install will only work if changed to:
"basscss.github.io": "https://github.com/basscss/basscss.git"
then npm start fails on some docs.css, here is the paste bin http://pastebin.com/DQhkDdDp
http://jxnblk.com/rebass/#ButtonCircle demo uses <Icon>
... a link to http://jxnblk.com/react-geomicons/ in the ButtonCircle docs would be helpful.
if yes, there is a bit of work to make it work since you make internal ref to github repos we dont have access to. Also half of npm deps are out-of date. Basically its unbuildable in the current state.
Do you think you can make it ready for PRs ?
I'd love to propose you some new components :p
See http://designinginterfaces.com/patterns/two-panel-selector/
It looks like the Link
component class supplied by React-Router (v2.0.0) doesn't pass the NavItem.propTypes.Component
test (it's not a React.PropTypes.node
, it's a class).
My code:
import { Link } from 'react-router';
// ...
<NavItem Component={Link} to='/'>Home</NavItem>
console warning:
Warning: Failed propType: Invalid prop `Component` supplied to `NavItem`, expected a ReactNode. Check the render method of `Root`.
It looks like the Link
is rendered correctly, however, so I think it's just a matter of changing the propTypes
rule to accept a component class?
Tab completion with syntax dictionary
If I am not missing something currently "instance styling" of value, unit and label is not possible with style
proptype? Change of proptypes fontSize
bold
and scale
for example.
Cheers
How does one create a NavItem with a react-router Link? Excuse my n00b-ness, I'm quite new to react.
Just seems like the right thing to do: https://facebook.github.io/react/docs/reusable-components.html#prop-validation
I include a module:
import {Button} from 'rebass'
When I try to build this with webpack, I get this error:
Error: Cannot find module "colors.css"
node_modules/rebass/dist/Button.js requires colors.js, which in turn requires colors.css. However, this file is not packaged in the dist directory, thus causing the error.
Any suggestions on how to solve this?
First instinct was thinking that there should be props for it, but you probably know of a better way. Do you have an example of doing this?
Problem is super large images, or images of different sizes create crazy looking lists.
Is using reflexbox the solution here?
Item
should be Dropdown.Item
. See: http://jxnblk.com/rebass/docs/components#Dropdown
I installed and poked a bit before seeing that 1.5 (from npm install rebass
and github) doesn't match the docs (0.2.0-beta7). Then I had to npm install colors.css
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.