A toolchain for React component styling.

Last update: Jun 23, 2022

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

GitHub

https://github.com/FormidableLabs/radium
Comments
  • 1. 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?

    Reviewed by skevy at 2015-06-09 15:40
  • 2. 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?

    Reviewed by johanneslumpe at 2016-03-14 17:49
  • 3. 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.

    Reviewed by epsitec at 2016-02-05 08:33
  • 4. 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+

    Reviewed by nathanmarks at 2019-06-07 15:31
  • 5. 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.

    Reviewed by bobbyrenwick at 2015-06-20 13:41
  • 6. Remove unknown props on
    tag

    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

    Reviewed by kylecesmat at 2016-07-01 19:16
  • 7. 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

    Reviewed by pbrianmackey at 2016-02-09 19:46
  • 8. 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.

    Reviewed by ianobermiller at 2015-04-02 06:41
  • 9. 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...

    Reviewed by kumarharsh at 2016-02-20 22:10
  • 10. 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
    
    Reviewed by Dindaleon at 2016-01-07 00:40
  • 11. 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 :(

    Reviewed by ondrejbartas at 2015-11-12 16:47
  • 12. 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.

    Reviewed by dependabot[bot] at 2022-03-02 22:48
  • 13. 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.

    Reviewed by dependabot[bot] at 2022-03-02 03:33
  • 14. 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"

    Reviewed by Banner-Keith at 2022-02-28 21:34
  • 15. 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.

    Reviewed by dependabot[bot] at 2022-02-26 10:11
  • 16. Bump follow-redirects from 1.13.0 to 1.14.8

    Bumps follow-redirects from 1.13.0 to 1.14.8.

    Commits
    • 3d81dc3 Release version 1.14.8 of the npm package.
    • 62e546a Drop confidential headers across schemes.
    • 2ede36d Release version 1.14.7 of the npm package.
    • 8b347cb Drop Cookie header across domains.
    • 6f5029a Release version 1.14.6 of the npm package.
    • af706be Ignore null headers.
    • d01ab7a Release version 1.14.5 of the npm package.
    • 40052ea Make compatible with Node 17.
    • 86f7572 Fix: clear internal timer on request abort to avoid leakage
    • 2e1eaf0 Keep Authorization header on subdomain redirects.
    • 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.

    Reviewed by dependabot[bot] at 2022-02-13 20:30
  • 17. Bump ua-parser-js from 0.7.12 to 0.7.31

    Bumps ua-parser-js from 0.7.12 to 0.7.31.

    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.

    Reviewed by dependabot[bot] at 2022-02-10 13:17
Related tags
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

May 6, 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

Jun 14, 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

May 30, 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

Jun 18, 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

Jun 22, 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.

Feb 27, 2022
Minimal and performant React component library built on styled-components

Minimal and performant React component library built on styled-components

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

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 💅

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

Jun 27, 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

Jun 18, 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 '

Apr 2, 2022
Seamless mapping of class names to CSS modules inside of React components.
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

Jun 19, 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

Jun 21, 2022
Flexibly styled chat-widget for your react apps.
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.

Jun 11, 2021
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

Apr 7, 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.

Jul 19, 2021
Dynamic Styles for React Native and Expo Web
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

May 17, 2022
🏠 Airbnb website using React, Next.js and Tailwind CSS
🏠 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.

May 2, 2022
Create tailwind css react components like styled components with classes name on multiple lines

Create Tailwind CSS React components like styled components with class names on multiple lines and conditional class rendering

Jun 21, 2022