Alternatives to Linaria logo

Alternatives to Linaria

Emotion, styled-components, Modernizr, Modernizr, and fancybox are the most popular alternatives and competitors to Linaria.
2
4
+ 1
0

What is Linaria and what are its top alternatives?

Write CSS in JS and get real CSS files during build. Use dynamic prop based styles with the React bindings and have them transpiled to CSS variables automatically. Great productivity with source maps and linting support.
Linaria is a tool in the Javascript Utilities & Libraries category of a tech stack.
Linaria is an open source tool with 6.3K GitHub stars and 229 GitHub forks. Here鈥檚 a link to Linaria's open source repository on GitHub

Top Alternatives to Linaria

  • Emotion

    Emotion

    Emotion is a performant and flexible CSS-in-JS library. Building on many other CSS-in-JS libraries, it allows you to style apps quickly with string or object styles. It has predictable composition to avoid specificity issues with CSS. With source maps and labels, Emotion has a great developer experience and great performance with heavy caching in production. ...

  • styled-components

    styled-components

    Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 馃拝 ...

  • Modernizr

    Modernizr

    It鈥檚 a collection of superfast tests or detects as we like to call them which run as your web page loads, then you can use the results to tailor the experience to the user. It tells you what HTML, CSS and JavaScript features the user鈥檚 browser has to offer. ...

  • Modernizr

    Modernizr

    It鈥檚 a collection of superfast tests or detects as we like to call them which run as your web page loads, then you can use the results to tailor the experience to the user. It tells you what HTML, CSS and JavaScript features the user鈥檚 browser has to offer. ...

  • fancybox

    fancybox

    It is a tool that offers a nice and elegant way to add zooming functionality for images, html content and multi-media on your webpages. It is built on the top of the popular JavaScript framework jQuery and is both easy to implement and a snap to customize. ...

  • Lodash

    Lodash

    A JavaScript utility library delivering consistency, modularity, performance, & extras. It provides utility functions for common programming tasks using the functional programming paradigm. ...

  • Moment.js

    Moment.js

    A javascript date library for parsing, validating, manipulating, and formatting dates. ...

  • Underscore

    Underscore

    A JavaScript library that provides a whole mess of useful functional programming helpers without extending any built-in objects. ...

Linaria alternatives & related posts

Emotion logo

Emotion

137
147
2
The Next Generation of CSS in JS
137
147
+ 1
2
PROS OF EMOTION
CONS OF EMOTION
    No cons available

    related Emotion posts

    Robert Zuber

    We are in the process of adopting Next.js as our React framework and using Storybook to help build our React components in isolation. This new part of our frontend is written in TypeScript, and we use Emotion for CSS/styling. For delivering data, we use GraphQL and Apollo. Jest, Percy, and Cypress are used for testing.

    See more
    Johnny Bell
    Software Engineer at Weedmaps | 14 upvotes 路 436.7K views

    For Stack Decisions I needed to add Markdown in the decision composer to give our users access to some general styling when writing their decisions. We used React & GraphQL on the #Frontend and Ruby & GraphQL on the backend.

    Instead of using Showdown or another tool, We decided to parse the Markdown on the backend so we had more control over what we wanted to render in Markdown because we didn't want to enable all Markdown options, we also wanted to limit any malicious code or images to be embedded into the decisions and Markdown was a fairly large to import into our component so it was going to add a lot of kilobytes that we didn't need.

    We also needed to style how the markdown looked, we are currently using Glamorous so I used that but we are planning to update this to Emotion at some stage as it has a fairly easy upgrade path rather than switching over to styled-components or one of the other cssInJs alternatives.

    Also we used React-Mentions for tagging tools and topics in the decisions. Typing @ will let you tag a tool, and typing # will allow you to tag a topic.

    The Markdown options that we chose to support are tags: a, code, u, b, em, pre, ul, ol, li.

    If there are anymore tags you'd love to see added in the composer leave me a comment below and we will look into adding them.

    #StackDecisionsLaunch

    See more
    styled-components logo

    styled-components

    639
    343
    6
    Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps...
    639
    343
    + 1
    6
    PROS OF STYLED-COMPONENTS
    CONS OF STYLED-COMPONENTS
      No cons available

      related styled-components posts

      Johnny Bell
      Software Engineer at Weedmaps | 14 upvotes 路 436.7K views

      For Stack Decisions I needed to add Markdown in the decision composer to give our users access to some general styling when writing their decisions. We used React & GraphQL on the #Frontend and Ruby & GraphQL on the backend.

      Instead of using Showdown or another tool, We decided to parse the Markdown on the backend so we had more control over what we wanted to render in Markdown because we didn't want to enable all Markdown options, we also wanted to limit any malicious code or images to be embedded into the decisions and Markdown was a fairly large to import into our component so it was going to add a lot of kilobytes that we didn't need.

      We also needed to style how the markdown looked, we are currently using Glamorous so I used that but we are planning to update this to Emotion at some stage as it has a fairly easy upgrade path rather than switching over to styled-components or one of the other cssInJs alternatives.

      Also we used React-Mentions for tagging tools and topics in the decisions. Typing @ will let you tag a tool, and typing # will allow you to tag a topic.

      The Markdown options that we chose to support are tags: a, code, u, b, em, pre, ul, ol, li.

      If there are anymore tags you'd love to see added in the composer leave me a comment below and we will look into adding them.

      #StackDecisionsLaunch

      See more

      ReactQL is a React + GraphQL front-end starter kit. #JSX is a natural way to think about building UI, and it renders to pure #HTML in the browser and on the server, making it trivial to build server-rendered Single Page Apps. GraphQL via Apollo was chosen for the data layer; #GraphQL makes it simple to request just the data your app needs, and #Apollo takes care of communicating with your API (written in any language; doesn't have to be JavaScript!), caching, and rendering to #React.

      ReactQL is written in TypeScript to provide full types/Intellisense, and pick up hard-to-diagnose goofs that might later show up at runtime. React makes heavy use of Webpack 4 to handle transforming your code to an optimised client-side bundle, and in throws back just enough code needed for the initial render, while seamlessly handling import statements asynchronously as needed, making the payload your user downloads ultimately much smaller than trying to do it by hand.

      React Helmet was chosen to handle <head> content, because it works universally, making it easy to throw back the correct <title> and other tags on the initial render, as well as inject new tags for subsequent client-side views.

      styled-components, Sass, Less and PostCSS were added to give developers a choice of whether to build styles purely in React / JavaScript, or whether to defer to a #css #preprocessor. This is especially useful for interop with UI frameworks like Bootstrap, Semantic UI, Foundation, etc - ReactQL lets you mix and match #css and renders to both a static .css file during bundling as well as generates per-page <style> tags when using #StyledComponents.

      React Router handles routing, because it works both on the server and in the client. ReactQL customises it further by capturing non-200 responses on the server, redirecting or throwing back custom 404 pages as needed.

      Koa is the web server that handles all incoming HTTP requests, because it's fast (TTFB < 5ms, even after fully rendering React), and its natively #async, making it easy to async/await inside routes and middleware.

      See more
      Modernizr logo

      Modernizr

      25.4K
      835
      0
      Respond to your user鈥檚 browser features
      25.4K
      835
      + 1
      0
      PROS OF MODERNIZR
        No pros available
        CONS OF MODERNIZR
          No cons available

          related Modernizr posts

          Modernizr logo

          Modernizr

          25.4K
          835
          0
          Respond to your user鈥檚 browser features
          25.4K
          835
          + 1
          0
          PROS OF MODERNIZR
            No pros available
            CONS OF MODERNIZR
              No cons available

              related Modernizr posts

              fancybox logo

              fancybox

              5.4K
              80
              0
              JavaScript lightbox library for presenting various types of media
              5.4K
              80
              + 1
              0
              PROS OF FANCYBOX
                No pros available
                CONS OF FANCYBOX
                  No cons available

                  related fancybox posts

                  Lodash logo

                  Lodash

                  4K
                  753
                  1
                  A JavaScript utility library
                  4K
                  753
                  + 1
                  1
                  CONS OF LODASH
                    No cons available

                    related Lodash posts

                    Elemental UI Vue.js vuex Node.js ES6 ESLint lodash Webpack Yarn Git

                    See more
                    Moment.js logo

                    Moment.js

                    3.4K
                    232
                    0
                    A JavaScript date library for parsing, validating, manipulating, and formatting dates
                    3.4K
                    232
                    + 1
                    0
                    PROS OF MOMENT.JS
                      No pros available
                      CONS OF MOMENT.JS
                        No cons available

                        related Moment.js posts

                        Underscore logo

                        Underscore

                        1.6K
                        563
                        291
                        JavaScript's utility _ belt
                        1.6K
                        563
                        + 1
                        291

                        related Underscore posts