Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
    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
    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
    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
    yo
    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.