FormidableLabs/radium

A toolchain for React component styling.

Ken Wheeler

@kenwheeler

React native sort of has radium built in

It accepts arrays of style objects by default

And you don't have things like :hover in play

I use radium to polyfill react native styles for the web. Works great unless you use make believe react native styles like paddingHorizontal

Cc @davards

Davey

@DaveyEdwards

@kenwheeler ahh thanks, nice to just stick with js styling to go back and forth for a more universal development. and @coopy sounds good ill create one

Phil Holden

@philholden

@coopy my first radium lesson has just been published on egghead.io:
https://egghead.io/lessons/react-styling-a-react-button-component-with-radium

Per Nilsson

@coopy

Woo! So rad! You have a very good voice for teaching :]

Armand Abric

@Spy-Seth

Hey guys, I just discover your https://github.com/FormidableLabs/radium-typography/tree/feature/measurement repository

In my company we are asking ourself the same question about typograhy

Did you need some help on it?

Per Nilsson

@coopy

@Spy-Seth thanks for asking! That’s actually an old branch; the most recent version of the text measurement library can be found here: https://github.com/FormidableLabs/measure-text

Davey

@DaveyEdwards

hey anyone seen this error before? Added a bunch of code and all of a sudden started getting it. Still going through my additions to see if it was outside radium-grid

Warning: Failed Context Types: Invalid context `_radiumStyleKeeper` of type `StyleKeeper` supplied to `Grid`, expected instance of `StyleKeeper`. Check the render method of `StatelessComponent`.

Phil Holden

@philholden

@coopy I have fallen into this pattern of writing compossible Radium components:

export const Row = Radium(({
  children,
  style,
  align,
  ...rest
}) => {
  const _styles = [
    { display: 'flex' },
    align && align >= 1 && align <= 9 &&
    {
      alignItems: rowAlignItems(align),
      justifyContent: rowJustifyContent(align)
    }
  ]

  return (
    <div
      style={ _styles.concat(style) }
      {...rest}
    >
      { children }
    </div>
  )
})

This allows me to create a more specific component like this without adding extra divs:

export const ListItem = ({
  children,
  style,
  isFirst,
  ...rest
}) => {
  const _styles = [
    {
      backgroundColor: COLOR.LIST_ITEM
    },
    !isFirst &&
    {
      marginTop: 1
    }
  ]

  return (
    <Row
      style={ _styles.concat(style) }
      {...rest}
    >
      { children }
    </Row>
  )
}

Phil Holden

@philholden

I use concat because it handles both [1,2,3].concat(4) and [1,2,3].concat([4,5,6])

Phil Holden

@philholden

So basically I am creating components where each layer of the onion composes in more styles (or event handlers) to an underlying element. I am thinking of making a video on this but wondering if it is idiomatic.

Lalit Kapoor

@lalitkapoor

Would love some feedback on FormidableLabs/radium#702

Vahid Panjganj

@vpanjganj

Hi guys

The fact that the last message is from May is quite scary

Anyone home?

Erin Jerri Pangilinan

@erinjerri

is anyone using a syntax highlighter like hihglight js in react that's working?
https://highlightjs.org/usage/
im tryin to figure out how to use this in a .js file though hmm

nm found it

https://github.com/akiran/react-highlight

Anup

@reznord

is it possible to create custom animations/transitions using radium?

Anup

@reznord

anyone online? I need some doubts to be clarified regarding radium

@alexlande ping (sorry to mention you) no one was replying to messages, so I thought of pinging someone from the team who is online

Anup

@reznord

@alexlande can we import css from external css files using radium as we do it in CSS Modules

Dan Van Brunt

@iDVB

Hey guys, how would I extend a component built using radium and overrride some of the styles?

Stijn de Koning

@stijniskoning

Good morning everyone, I have a question regarding some tool to pick for my react applications. We're currently in the process of porting our applications to React and we are still using our old CSS. But since we started with React, we've seen a lot of new great CSS tools and technologies our there (Radium, CSS Modules, PostCSS, CSS Next, etc.). Development in this area seems to go very fast at the moment. Right now we have the possibility to pick any technology we want and of course I want to make the right choice. We develop (large) React web applications and also React Native apps. Any advice is really appreciated. What would you pick and why? (I have also asked this question in css-modules)

Joshua Robinson

@buildbreakdo

@stijniskoning See this repo https://github.com/MicheleBertoli/css-in-js for a decent comparison, lots of missing criteria though.. personally do not believe the object literal syntax is going to last. Clearly has momentum from FB using it for inline styles, has been hinted that they may not pursue that style over the long term in a few issues that were opened (mainly revolving around value prefixing issues like -webkit-flex). Forcing CSS into an object is unnecessary obfuscation that adds syntactic noise to CSS for what value? Why not just allow people to write CSS using ES 5 / 6 template strings and do away with all the workarounds for flex declarations and :hover etc..

Tony Tai Nguyen

@codetony25

I'd recommend https://github.com/nbrady-techempower/jassy it's very easy to manipulate the styles.

Foonz

@Foonz

Anyone home? :)

Andre

@andrecalvo

I was wondering if one of you lovely people might be able to help me with an issue that isn't particularly Radium related. I have some inline styles on a component of which I'm trying to use an SVG as a background image....

const closeIcon = require('./../../img/close.icon.svg')
....
      background: `url(data:image/svg+xml;utf8,${closeIcon})`,
....

Should this work?

If I log the import it has the correct SVG, I think maybe I'm missing something

Marina Middleton

@marinamarina

Hey guys, does anyone know how do I translate this

 select::-ms-expand {
    display: none;
}

to Radium?

Foonz

@Foonz

'::-ms-expand': { display: 'none' } and set it on the select as style prop or if it is a global style use the Style component

Marina Middleton

@marinamarina

@Foonz Thank you! Will try it out!

Daniel Dosen

@dgdosen

Hi all - Newb Radium question: Can I set the style on a component programmatically? Let's say I have styles called styles.full and styles.partial. Instead of:

          style={[
            styles.full
          ]}

I want something like:

          style={[
            {myState.style}
          ]}

Is that possible? where myState.style = 'styles.full'

Punita Ojha

@punitaojha

This message was deleted

Himujjal Upadhyaya

@Himujjal

Hello any ideas how to remove the margins in radium grid and make the cells compact?

Please help me on this one

Himujjal Upadhyaya

@Himujjal

I like the grid system. But how to remove the margin between the cells in a grid

aaleixandreaviata

@aaleixandreaviata

Hey yall, I'm having some problems getting Radium to work. When I pass an array of styles into a Radium wrapped component, it ignores all the styles, however, when I pass in a single style object, it works fine. Any ideas?

Manjula Dube

@manjula_dube25_twitter

every one :)

Rob Halff

@rhalff_gitlab

Hi, I'm looking into whether to use Radium, I haven't used it yet and notice in the github repos of formidablelabs several projects are using emotion instead.

Is that an indication that emotion would be a better option to start using?

I neither have used Radium nor emotion yet I must say.

Where communities thrive

People

Repo info

Activity