A toolchain for React component styling.

Related tags

React Styling radium
Overview

Travis Status AppVeyor Status Coverage Status NPM Package Dependency Status gzipped size Maintenance Status

Radium

yarn add radium
# or
npm install --save radium

Radium is a set of tools to manage inline styles on React elements. It gives you powerful styling capabilities without CSS.

Inspired by React: CSS in JS by vjeux.

Maintenance Status

Stable: Formidable is not planning to develop any new features for this project. We are still responding to bug reports and security concerns. We are still welcoming PRs for this project, but PRs that include new features should be small and easy to integrate and should not include breaking changes.

For more about what this means for Radium, view our announcement here.

Overview

Eliminating CSS in favor of inline styles that are computed on the fly is a powerful approach, providing a number of benefits over traditional CSS:

  • Scoped styles without selectors
  • Avoids specificity conflicts
  • Source order independence
  • Dead code elimination
  • Highly expressive

Despite that, there are some common CSS features and techniques that inline styles don't easily accommodate: media queries, browser states (:hover, :focus, :active) and modifiers (no more .btn-primary!). Radium offers a standard interface and abstractions for dealing with these problems.

When we say expressive, we mean it: math, concatenation, regex, conditionals, functions–JavaScript is at your disposal. Modern web applications demand that the display changes when data changes, and Radium is here to help.

For a short technical explanation, see How does Radium work?.

Features

  • Conceptually simple extension of normal inline styles
  • Browser state styles to support :hover, :focus, and :active
  • Media queries
  • Automatic vendor prefixing
  • Keyframes animation helper
  • ES6 class and createClass support

Docs

Usage

Start by wrapping your component class with Radium(), like export default Radium(Component), or Component = Radium(Component), which works with classes, createClass, and stateless components (functions that take props and return a ReactElement). Then, write a style object as you normally would with inline styles, and add in styles for interactive states and media queries. Pass the style object to your component via style={...} and let Radium do the rest!

<Button kind="primary">Radium Button</Button>
import Radium from 'radium';
import React from 'react';
import color from 'color';

class Button extends React.Component {
  static propTypes = {
    kind: PropTypes.oneOf(['primary', 'warning']).isRequired
  };

  render() {
    // Radium extends the style attribute to accept an array. It will merge
    // the styles in order. We use this feature here to apply the primary
    // or warning styles depending on the value of the `kind` prop. Since its
    // all just JavaScript, you can use whatever logic you want to decide which
    // styles are applied (props, state, context, etc).
    return (
      <button style={[styles.base, styles[this.props.kind]]}>
        {this.props.children}
      </button>
    );
  }
}

Button = Radium(Button);

// You can create your style objects dynamically or share them for
// every instance of the component.
var styles = {
  base: {
    color: '#fff',

    // Adding interactive state couldn't be easier! Add a special key to your
    // style object (:hover, :focus, :active, or @media) with the additional rules.
    ':hover': {
      background: color('#0074d9')
        .lighten(0.2)
        .hexString()
    }
  },

  primary: {
    background: '#0074D9'
  },

  warning: {
    background: '#FF4136'
  }
};

Importing Radium

As of v0.22.x, Radium is built as an ECMAScript Modules-first project. We now have a package.json:module entry pointing to our library files with import|export statements instead of CommonJS requires. We still support CommonJS requires with a special package.json:main entry pointing to root index.js to smooth over this transition. The basic takeaways are:

If you are using ESM with webpack or @std/esm with Node.js, imports like the following work fine without any gotchas:

import Radium from 'radium';
import Radium, {Style} from 'radium';

If you are using CommonJS with Node.js or [email protected] requires work like normal:

const Radium = require('radium');
const {Style} = require('radium');

If you are using CommonJS with [email protected]+, however, you must instead add .default to the root Radium object import:

const Radium = require('radium').default; // CHANGED: Must add `.default`
const {Style} = require('radium'); // Works as per normal

If you cannot change the require statements directly (say Radium is included from a different library your project depends on) you can manually tweak the Radium import in your project's webpack configuration with the following:

resolve: {
  alias: {
    radium: require.resolve('radium/index');
  }
}

which will allow const Radium = require('radium'); to still work. The configuration effectively forces webpack to point to code from package.json:main (which points to /index.js) instead of what is in package.json:module.

Note: Radium uses Reflect which is not supported in IE11. You will need to bring in a polyfill like CoreJs in order to support <IE11.

Examples

To see the universal examples:

npm install
npm run universal

To see local client-side only examples in action, do this:

npm install
npm run examples

How does Radium work?

Following is a short technical explanation of Radium's inner workings:

  • Wrap the render function
  • Recurse into the result of the original render
  • For each element:
    • Add handlers to props if interactive styles are specified, e.g. onMouseEnter for :hover, wrapping existing handlers if necessary
    • If any of the handlers are triggered, e.g. by hovering, Radium calls setState to update a Radium-specific field on the components state object
    • On re-render, resolve any interactive styles that apply, e.g. :hover, by looking up the element's key or ref in the Radium-specific state

More with Radium

You can find a list of other tools, components, and frameworks to help you build with Radium on our wiki. Contributions welcome!

Contributing

Please see CONTRIBUTING

Comments
  • Prefixing breaks server rendering

    Prefixing breaks server rendering

    Not sure what to do on this - but in general, prefixing breaks server rendering, as it returns different markup on the server than it does on the client.

    React spits out stuff like this:

    Warning: React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server:
    (client) style="display:flex;-webkit-flex:1;-webk
    (server) style="display:flex;flex:1;align-items:c
    

    Ideas?

    bug 
    opened by skevy 43
  • Media queries on component level flicker

    Media queries on component level flicker

    When rendering components whose styles have media queries in them, flickering can be observed on the first render because at this point radium injects the media queries into the style tag. Not sure if this is a known bug and if so, is there a workaround?

    bug high priority 
    opened by johanneslumpe 42
  • Radium wrapping not compatible with native classes?

    Radium wrapping not compatible with native classes?

    I've been successfully using Radium with the standard es2015 Babel preset.

    Since our generated code runs on Node 5, I wanted to try out babel-preset-node5. With this preset, Babel is no longer translating class to ES5 constructs, since Node 5 supports classes out of the box. However, when wrapping our component classes with Radium, I get this error:

    TypeError: Class constructors cannot be invoked without 'new'

    Here is a code snipped which reproduces the error:

    import React from 'react';
    import radium from 'radium';
    
    class Foo extends React.Component {
      render () {
        return <div>Hello</div>;
      }
    }
    
    const WrappedFoo = radium (Foo);
    
    new WrappedFoo (); // TypeError: Class constructors cannot be invoked without 'new'
    

    My .babelrc:

    {
      "presets": ["stage-0", "node5", "react"]
    }
    

    There seems to be some logic in the Radium wrapper that is not compatible with real ES2015 classes.

    bug interoperability 
    opened by epsitec 33
  • Add hook and forwardRef support

    Add hook and forwardRef support

    Addresses: https://github.com/FormidableLabs/radium/issues/1016 https://github.com/FormidableLabs/radium/issues/1010

    This PR makes some big changes, and I understand if dropping support for React < 16.8 on master is not do-able at this time. However, the inability to use hooks and forwardRef with Radium means we are missing out on some of the great features being introduced to React.

    Hopefully the changes in here can at least serve as a point for discussion (if everything works as-intended).

    • Requires React v16.8+
    • Supports hooks in radium wrapped components
    • Supports radium wrapped forwardRef components
    • Makes changes to the codepath for function components (see enhancer.js)
    • Uses hooks + new context API internally

    I also had to upgrade babel, eslint + plugins, and flow to be able to use the latest version of React features + their associated flow types.

    I had to comment out node 6 for appveyor because the eslint react hooks plugin is asking for node 7+

    opened by nathanmarks 24
  • 0.13.0 breaks react-hot-loader

    0.13.0 breaks react-hot-loader

    I'm using React.createClass, Radium and [email protected] like follows:

    var React = require("react");
    var Radium = require("radium");
    
    var SearchInput = React.createClass({
    
        getStyles: function() {
            const styles = {
                base: {
                    backgroundColor: "red",
                },
            };
    
            return [
                styles.base,
            ];
        },
    
        render: function() {
            return (
                <div style={this.getStyles()}>
                    Hello Radium
                </div>
            );
        }
    
    });
    
    module.exports = Radium(SearchInput);
    

    When I updated to v0.13.0, hot updates to components using Radium stopped working. It was working with v0.12.1 before. This is a pretty big as all my styles are done with Radium and this now stops me from seeing the effect of my code changes.

    help wanted 
    opened by bobbyrenwick 23
  • Remove unknown props on <div> tag

    Remove unknown props on

    The style-root component is receiving all props passed to it. We should remove unused props as ~~future versions of React~~ React v15.2.0 will throw warning messages.

    Warning: Unknown prop `_radiumDidResolveStyles` on <div> tag. Remove this prop from the element. For details, see https://fb.me/react-unknown-prop
        in div (created by StyleRoot)
        in StyleRoot (created by App)
        in App
    

    Line in question - https://github.com/FormidableLabs/radium/blob/master/src/components/style-root.js#L35

    Related to this issue - https://github.com/react-bootstrap/react-bootstrap/issues/1994#issuecomment-229699699

    help wanted chore high priority 
    opened by kylecesmat 22
  • BUG: `package.json:files` field breaks `git` installs.

    BUG: `package.json:files` field breaks `git` installs.

    When I run npm install radium --save it errors:

    ENOENT. This is most likely not a problem with npm itself and is related to npm not being able to find a file. Error no -4058

    Looking at the attached log I saw it quit because of something found in node_modules. So I deleted everything in node_modules and tried again. Same error

    npm-debug.txt

    bug 
    opened by pbrianmackey 22
  • New wrap API

    New wrap API

    Basically an import of Cesium from https://github.com/ianobermiller/nuclearmail/blob/e30abd3d3c06ff3fb0ed9e db0c28b758b2cbd114/src/js/Cesium.js, ran through babel-js.

    Still need to figure out media queries. Thoughts so far? I couldn't figure out a good way to reuse the existing code, since so much has changed. Since it is far more convenient in code, I am using the :hover syntax instead of state -> hover.

    opened by ianobermiller 22
  • The `display` property is not being applied to a lot of elements in IE10

    The `display` property is not being applied to a lot of elements in IE10

    This is a very weird one I stumbled on today. Apparently, Radium is not applying (or maybe IE10 is dropping) the display styles to the element's inline styles. Everything else seems to be working.

    I'll try to get a repro on this, maybe tomorrow...

    opened by kumarharsh 21
  • Issue configuring Radium on a server side rendering App

    Issue configuring Radium on a server side rendering App

    I followed the guide for setting Radium up. I wrapped my styled component with the @Radium connector and configured the server and client as follows:

    server:

    <Provider store={ store } key="provider">
      <IntlProvider
        key={ store.getState().user.data.locale }
        locale={ store.getState().user.data.locale }
        messages={ lang[store.getState().user.data.locale] }>
        <StyleRoot style={{ userAgent: request.headers['user-agent'] }}>
          <ReduxRouter/>
        </StyleRoot>
      </IntlProvider>
    </Provider>
    

    client:

     ReactDOM.render(
        <Provider store = { store } key="provider">
          <ConnectedIntlProvider>
            <StyleRoot style={{ userAgent: navigator.userAgent }}>
              <ReduxRouter
                children = { getRoutes(store) } />
            </StyleRoot>
          </ConnectedIntlProvider>
        </Provider>,
        root
      );
    

    These are the errors I am getting:

    On the server:

    Radium: userAgent should be supplied for server-side rendering. See https://github.com/FormidableLabs/radium/tree/master/docs/api#radium for more information.
    Either the global navigator was undefined or an invalid userAgent was provided. Using a valid userAgent? Please let us know and create an issue at https://github.com/rofrischmann/inline-style-prefixer/issues
    

    On the client:

    Warning: React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server:
     (client) ctid=".1kcxxrwd0jk.$/=10"><div class="md
     (server) ctid=".1kcxxrwd0jk.$=10"><div class="mdl
    
    opened by Dindaleon 21
  • Help with react router and server rendering

    Help with react router and server rendering

    Hi guys, i have problem and spent few hours with updating radium from 0.14.3 to 0.15.1.

    I am using as default stack http://github.com/este/este

    I could not find a way how to get rid of error on server rendering. I tried to add it by radium to context, i tried to add it manually to context and only thing which was working was to create decorator which takes different context name and passes it as parameter to radium for every component on page :( but it is not nice solution :(

    docs 
    opened by ondrejbartas 18
  • Bump eventsource from 1.0.7 to 1.1.2

    Bump eventsource from 1.0.7 to 1.1.2

    Bumps eventsource from 1.0.7 to 1.1.2.

    Changelog

    Sourced from eventsource's changelog.

    1.1.2

    • Inline origin resolution, drops original dependency (#281 Espen Hovlandsdal)

    1.1.1

    • Do not include authorization and cookie headers on redirect to different origin (#273 Espen Hovlandsdal)

    1.1.0

    • Improve performance for large messages across many chunks (#130 Trent Willis)
    • Add createConnection option for http or https requests (#120 Vasily Lavrov)
    • Support HTTP 302 redirects (#116 Ryan Bonte)
    • Prevent sequential errors from attempting multiple reconnections (#125 David Patty)
    • Add new to correct test (#111 Stéphane Alnet)
    • Fix reconnections attempts now happen more than once (#136 Icy Fish)
    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump jsdom from 12.0.0 to 16.5.0

    Bump jsdom from 12.0.0 to 16.5.0

    Bumps jsdom from 12.0.0 to 16.5.0.

    Release notes

    Sourced from jsdom's releases.

    Version 16.5.0

    • Added window.queueMicrotask().
    • Added window.event.
    • Added inputEvent.inputType. (diegohaz)
    • Removed ondragexit from Window and friends, per a spec update.
    • Fixed the URL of about:blank iframes. Previously it was getting set to the parent's URL. (SimonMueller)
    • Fixed the loading of subresources from the filesystem when they had non-ASCII filenames.
    • Fixed the hidden="" attribute to cause display: none per the user-agent stylesheet. (ph-fritsche)
    • Fixed the new File() constructor to no longer convert / to :, per a pending spec update.
    • Fixed mutation observer callbacks to be called with the MutationObserver instance as their this value.
    • Fixed <input type=checkbox> and <input type=radio> to be mutable even when disabled, per a spec update.
    • Fixed XMLHttpRequest to not fire a redundant final progress event if a progress event was previously fired with the same loaded value. This would usually occur with small files.
    • Fixed XMLHttpRequest to expose the Content-Length header on cross-origin responses.
    • Fixed xhr.response to return null for failures that occur during the middle of the download.
    • Fixed edge cases around passing callback functions or event handlers. (ExE-Boss)
    • Fixed edge cases around the properties of proxy-like objects such as localStorage or dataset. (ExE-Boss)
    • Fixed a potential memory leak with custom elements (although we could not figure out how to trigger it). (soncodi)

    Version 16.4.0

    • Added a not-implemented warning if you try to use the second pseudo-element argument to getComputedStyle(), unless you pass a ::part or ::slotted pseudo-element, in which case we throw an error per the spec. (ExE-Boss)
    • Improved the performance of repeated access to el.tagName, which also indirectly improves performance of selector matching and style computation. (eps1lon)
    • Fixed form.elements to respect the form="" attribute, so that it can contain non-descendant form controls. (ccwebdesign)
    • Fixed el.focus() to do nothing on disconnected elements. (eps1lon)
    • Fixed el.focus() to work on SVG elements. (zjffun)
    • Fixed removing the currently-focused element to move focus to the <body> element. (eps1lon)
    • Fixed imgEl.complete to return true for <img> elements with empty or unset src="" attributes. (strager)
    • Fixed imgEl.complete to return true if an error occurs loading the <img>, when canvas is enabled. (strager)
    • Fixed imgEl.complete to return false if the <img> element's src="" attribute is reset. (strager)
    • Fixed the valueMissing validation check for <input type="radio">. (zjffun)
    • Fixed translate="" and draggable="" attribute processing to use ASCII case-insensitivity, instead of Unicode case-insensitivity. (zjffun)

    Version 16.3.0

    • Added firing of focusin and focusout when using el.focus() and el.blur(). (trueadm)
    • Fixed elements with the contenteditable="" attribute to be considered as focusable. (jamieliu386)
    • Fixed window.NodeFilter to be per-Window, instead of shared across all Windows. (ExE-Boss)
    • Fixed edge-case behavior involving use of objects with handleEvent properties as event listeners. (ExE-Boss)
    • Fixed a second failing image load sometimes firing a load event instead of an error event, when the canvas package is installed. (strager)
    • Fixed drawing an empty canvas into another canvas. (zjffun)

    Version 16.2.2

    • Updated StyleSheetList for better spec compliance; notably it no longer inherits from Array.prototype. (ExE-Boss)
    • Fixed requestAnimationFrame() from preventing process exit. This likely regressed in v16.1.0.
    • Fixed setTimeout() to no longer leak the closures passed in to it. This likely regressed in v16.1.0. (AviVahl)
    • Fixed infinite recursion that could occur when calling click() on a <label> element, or one of its descendants.
    • Fixed getComputedStyle() to consider inline style="" attributes. (eps1lon)
    • Fixed several issues with <input type="number">'s stepUp() and stepDown() functions to be properly decimal-based, instead of floating point-based.
    • Fixed various issues where updating selectEl.value would not invalidate properties such as selectEl.selectedOptions. (ExE-Boss)
    • Fixed <input>'s src property, and <ins>/<del>'s cite property, to properly reflect as URLs.
    • Fixed window.addEventLister, window.removeEventListener, and window.dispatchEvent to properly be inherited from EventTarget, instead of being distinct functions. (ExE-Boss)
    • Fixed errors that would occur if attempting to use a DOM object, such as a custom element, as an argument to addEventListener.

    ... (truncated)

    Changelog

    Sourced from jsdom's changelog.

    16.5.0

    • Added window.queueMicrotask().
    • Added window.event.
    • Added inputEvent.inputType. (diegohaz)
    • Removed ondragexit from Window and friends, per a spec update.
    • Fixed the URL of about:blank iframes. Previously it was getting set to the parent's URL. (SimonMueller)
    • Fixed the loading of subresources from the filesystem when they had non-ASCII filenames.
    • Fixed the hidden="" attribute to cause display: none per the user-agent stylesheet. (ph-fritsche)
    • Fixed the new File() constructor to no longer convert / to :, per a pending spec update.
    • Fixed mutation observer callbacks to be called with the MutationObserver instance as their this value.
    • Fixed <input type=checkbox> and <input type=radio> to be mutable even when disabled, per a spec update.
    • Fixed XMLHttpRequest to not fire a redundant final progress event if a progress event was previously fired with the same loaded value. This would usually occur with small files.
    • Fixed XMLHttpRequest to expose the Content-Length header on cross-origin responses.
    • Fixed xhr.response to return null for failures that occur during the middle of the download.
    • Fixed edge cases around passing callback functions or event handlers. (ExE-Boss)
    • Fixed edge cases around the properties of proxy-like objects such as localStorage or dataset. (ExE-Boss)
    • Fixed a potential memory leak with custom elements (although we could not figure out how to trigger it). (soncodi)

    16.4.0

    • Added a not-implemented warning if you try to use the second pseudo-element argument to getComputedStyle(), unless you pass a ::part or ::slotted pseudo-element, in which case we throw an error per the spec. (ExE-Boss)
    • Improved the performance of repeated access to el.tagName, which also indirectly improves performance of selector matching and style computation. (eps1lon)
    • Fixed form.elements to respect the form="" attribute, so that it can contain non-descendant form controls. (ccwebdesign)
    • Fixed el.focus() to do nothing on disconnected elements. (eps1lon)
    • Fixed el.focus() to work on SVG elements. (zjffun)
    • Fixed removing the currently-focused element to move focus to the <body> element. (eps1lon)
    • Fixed imgEl.complete to return true for <img> elements with empty or unset src="" attributes. (strager)
    • Fixed imgEl.complete to return true if an error occurs loading the <img>, when canvas is enabled. (strager)
    • Fixed imgEl.complete to return false if the <img> element's src="" attribute is reset. (strager)
    • Fixed the valueMissing validation check for <input type="radio">. (zjffun)
    • Fixed translate="" and draggable="" attribute processing to use ASCII case-insensitivity, instead of Unicode case-insensitivity. (zjffun)

    16.3.0

    • Added firing of focusin and focusout when using el.focus() and el.blur(). (trueadm)
    • Fixed elements with the contenteditable="" attribute to be considered as focusable. (jamieliu386)
    • Fixed window.NodeFilter to be per-Window, instead of shared across all Windows. (ExE-Boss)
    • Fixed edge-case behavior involving use of objects with handleEvent properties as event listeners. (ExE-Boss)
    • Fixed a second failing image load sometimes firing a load event instead of an error event, when the canvas package is installed. (strager)
    • Fixed drawing an empty canvas into another canvas. (zjffun)

    16.2.2

    • Updated StyleSheetList for better spec compliance; notably it no longer inherits from Array.prototype. (ExE-Boss)
    • Fixed requestAnimationFrame() from preventing process exit. This likely regressed in v16.1.0.
    • Fixed setTimeout() to no longer leak the closures passed in to it. This likely regressed in v16.1.0. (AviVahl)
    • Fixed infinite recursion that could occur when calling click() on a <label> element, or one of its descendants.
    • Fixed getComputedStyle() to consider inline style="" attributes. (eps1lon)
    • Fixed several issues with <input type="number">'s stepUp() and stepDown() functions to be properly decimal-based, instead of floating point-based.

    ... (truncated)

    Commits
    • 2d82763 Version 16.5.0
    • 9741311 Fix loading of subresources with Unicode filenames
    • 5e46553 Use domenic's ESLint config as the base
    • 19b35da Fix the URL of about:blank iframes
    • 017568e Support inputType on InputEvent
    • 29f4fdf Upgrade dependencies
    • e2f7639 Refactor create‑event‑accessor.js to remove code duplication
    • ff69a75 Convert JSDOM to use callback functions
    • 19df6bc Update links in contributing guidelines
    • 1e34ff5 Test triage
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump color-string from 1.5.2 to 1.9.0

    Bump color-string from 1.5.2 to 1.9.0

    Bumps color-string from 1.5.2 to 1.9.0.

    Release notes

    Sourced from color-string's releases.

    1.9.0

    Minor Release 1.9.0

    • Add parsing of exponential alpha values for HWB and HSL (#66)

    Thanks to @​babycannotsay for their contribution!

    1.8.2

    Patch release 1.8.2

    • Fix incorrect handling of optional comma in rgb() regex (#65)

    Thanks to @​gerdasi and @​mastertheblaster for reporting and confirming the bug!

    1.8.1

    Patch release 1.8.1

    • Fix rgb alpha percentage parsing from int to float (#61)

    Thanks to @​clytras for their contribution!

    1.8.0

    Minor release 1.8.0

    • Add anchors to keyword regex (#64)

    Thanks to @​cq360767996 for their contribution!

    1.7.4

    Patch Release 1.7.4

    • Fix bug in .to.hex() output if the inputs aren't rounded numbers (#25)

    1.7.3

    Patch Release 1.7.3

    • Fix hue modulo operation (#50)

    Thanks to @​adroitwhiz for their contributions.

    1.7.2

    Patch Release 1.7.2

    • Fix issue where color-string with incorrectly return a color for properties on Object's prototype like "constructor". (#45)

    Thanks to @​tolmasky for their contributions.

    1.7.1

    Patch release 1.7.1

    ... (truncated)

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 1
  • Bump karma from 3.0.0 to 6.3.16

    Bump karma from 3.0.0 to 6.3.16

    Bumps karma from 3.0.0 to 6.3.16.

    Release notes

    Sourced from karma's releases.

    v6.3.16

    6.3.16 (2022-02-10)

    Bug Fixes

    • security: mitigate the "Open Redirect Vulnerability" (ff7edbb)

    v6.3.15

    6.3.15 (2022-02-05)

    Bug Fixes

    v6.3.14

    6.3.14 (2022-02-05)

    Bug Fixes

    • remove string template from client code (91d5acd)
    • warn when singleRun and autoWatch are false (69cfc76)
    • security: remove XSS vulnerability in returnUrl query param (839578c)

    v6.3.13

    6.3.13 (2022-01-31)

    Bug Fixes

    • deps: bump log4js to resolve security issue (5bf2df3), closes #3751

    v6.3.12

    6.3.12 (2022-01-24)

    Bug Fixes

    • remove depreciation warning from log4js (41bed33)

    v6.3.11

    6.3.11 (2022-01-13)

    Bug Fixes

    • deps: pin colors package to 1.4.0 due to security vulnerability (a5219c5)

    ... (truncated)

    Changelog

    Sourced from karma's changelog.

    6.3.16 (2022-02-10)

    Bug Fixes

    • security: mitigate the "Open Redirect Vulnerability" (ff7edbb)

    6.3.15 (2022-02-05)

    Bug Fixes

    6.3.14 (2022-02-05)

    Bug Fixes

    • remove string template from client code (91d5acd)
    • warn when singleRun and autoWatch are false (69cfc76)
    • security: remove XSS vulnerability in returnUrl query param (839578c)

    6.3.13 (2022-01-31)

    Bug Fixes

    • deps: bump log4js to resolve security issue (5bf2df3), closes #3751

    6.3.12 (2022-01-24)

    Bug Fixes

    • remove depreciation warning from log4js (41bed33)

    6.3.11 (2022-01-13)

    Bug Fixes

    • deps: pin colors package to 1.4.0 due to security vulnerability (a5219c5)

    6.3.10 (2022-01-08)

    Bug Fixes

    • logger: create parent folders if they are missing (0d24bd9), closes #3734

    ... (truncated)

    Commits
    • ab4b328 chore(release): 6.3.16 [skip ci]
    • ff7edbb fix(security): mitigate the "Open Redirect Vulnerability"
    • c1befa0 chore(release): 6.3.15 [skip ci]
    • d9dade2 fix(helper): make mkdirIfNotExists helper resilient to concurrent calls
    • 653c762 ci: prevent duplicate CI tasks on creating a PR
    • c97e562 chore(release): 6.3.14 [skip ci]
    • 91d5acd fix: remove string template from client code
    • 69cfc76 fix: warn when singleRun and autoWatch are false
    • 839578c fix(security): remove XSS vulnerability in returnUrl query param
    • db53785 chore(release): 6.3.13 [skip ci]
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 1
  • Peer Dependency for React 17.

    Peer Dependency for React 17.

    Can you please release a new version that has a peer dependency for React 17?

    I believe this would work: "react": "^16.8.0 || ^17.0.0"

    opened by Banner-Keith 1
  • Bump url-parse from 1.4.7 to 1.5.10

    Bump url-parse from 1.4.7 to 1.5.10

    Bumps url-parse from 1.4.7 to 1.5.10.

    Commits
    • 8cd4c6c 1.5.10
    • ce7a01f [fix] Improve handling of empty port
    • 0071490 [doc] Update JSDoc comment
    • a7044e3 [minor] Use more descriptive variable name
    • d547792 [security] Add credits for CVE-2022-0691
    • ad23357 1.5.9
    • 0e3fb54 [fix] Strip all control characters from the beginning of the URL
    • 61864a8 [security] Add credits for CVE-2022-0686
    • bb0104d 1.5.8
    • d5c6479 [fix] Handle the case where the port is specified but empty
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 1
Owner
Formidable
We design and develop web apps, train engineers at startups and Fortune 500 companies, and improve the modern web with open source software.
Formidable
CSS Maid 🧹 A tool made for React.js to clean up CSS default styling! Give your CSS a nice reset and style with less hassle!

CSS Maid ?? What is it? CSS Maid is a tool for React.js that helps clean up & reset default css! It resets default padding, remove text-decoration on

Josh Daniel 7 Aug 31, 2022
Whirlwind is a utility-first styling framework specifically designed for React Native. It is heavily inspired by Tachyons and Tailwind CSS and uses low-level building blocks for rapidly building custom designs.

React Native Whirlwind ??️ A utility-first CSS framework designed for React Native. Whirlwind is a utility-first CSS framework specifically designed f

Andre Rabold 95 Aug 30, 2022
🎨 Aesthetic is an end-to-end multi-platform styling framework that offers a strict design system, robust atomic CSS-in-JS engine, a structural style sheet specification (SSS), a low-runtime solution, and much more!

Aesthetic Start using Aesthetic now! aestheticsuite.dev Aesthetic is an end-to-end, multi-platform styling and design suite, that offers the following

Aesthetic 198 Nov 11, 2022
Encapsulated styling for your javascript components with all the power of javascript and CSS combined.

Stilr Encapsulated styling for your javascript components with all the power of javascript and CSS combined. Unique class names (Content Hash Based) U

kodyl 236 Nov 18, 2022
Incredible fast template toolkit for making new or re-styling existing components with Tailwind CSS.

Stail Incredible fast template toolkit for making new or re-styling existing components with Tailwind CSS. Why it's needed? First of all, I'm tired fr

null 7 Oct 28, 2022
TailwindCSS plugin that helps styling radix state

TailwindCSS Radix TailwindCSS plugin that helps styling radix state. Installation yarn yarn add tailwindcss-radix npm npm i tailwindcss-radix Usage Yo

Florentin / 珞辰 956 Nov 18, 2022
A react component available on npm to easily link to your project on github and is made using React, TypeScript and styled-components.

fork-me-corner is a react component available on npm to easily link to your project on github and is made using React, TypeScript and styled-components.

Victor Dantas 9 Jun 30, 2022
Minimal and performant React component library built on styled-components

Minimal and performant React component library built on styled-components

Cody Nova 0 Jan 3, 2022
This repository allows you to create a React template component folder. It optionally includes scss and css files

Generate-React-Components - grc grc let you generate react components in typescript in a folder you specify and it will include .tsx, .scss, .css file

Qasem Albinahmed 1 Nov 26, 2021
Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅

Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress ?? Looking for v5? The master branch is un

styled-components 37.8k Nov 25, 2022
:package: Modular responsive component

React Container Query True modularity in styling responsive component. Installation npm i -D react-container-query Disclaimer I am providing code in t

null 865 Nov 22, 2022
A linear progressbar component

react-progressbar-line A linear progressbar component. Demo Install npm install --save react-progressbar-line Usage import React, { Component } from '

Brijesh Pant 1 Apr 2, 2022
Seamless mapping of class names to CSS modules inside of React components.

React CSS Modules React CSS Modules implement automatic mapping of CSS modules. Every CSS class is assigned a local-scoped identifier with a global un

Gajus Kuizinas 5.2k Nov 21, 2022
CSS media queries in react - for responsive design, and more.

react-responsive Information Package react-responsive Description Media queries in react for responsive design Browser Version >= IE6* Demo The best s

contra 6.4k Nov 25, 2022
Flexibly styled chat-widget for your react apps.

Flexibly styled chat-widget for your react apps. It was mainly created for integration with chat-bots in messengers.

Eddie Nubes 4 Nov 5, 2022
React visual primitives with first-class TypeScript support and a tiny footprint.

tsstyled React visual primitives with first-class TypeScript support and a tiny footprint. TL;DR: This library is a styled-components rewrite that is

new Chris(A) 53 Nov 14, 2022
Imersão React.js 3º edição. Project using ReactJS, Next JS, and Styled Components for the week challenge by Alura. We created a social network inspired by Orkut.

Example app with styled-components This example features how you use a different styling solution than styled-jsx that also supports universal styles.

Julie 5 Jul 19, 2021
Dynamic Styles for React Native and Expo Web

react-native-swag-styles Dynamic Styles for React Native and Expo Web Highlights Dynamic. Based on React Hook. It automatically re-renders when necess

EF Education First 15 Oct 5, 2022
🏠 Airbnb website using React, Next.js and Tailwind CSS

This example shows how to use Tailwind CSS (v2.2) with Next.js. It follows the steps outlined in the official Tailwind docs.

Michele Picozzi 46 Nov 15, 2022