Is react-with-styles still maintained in 2023?

No, the README explicitly states it's in maintenance mode and will be archived, so it's not actively developed. Consider alternatives for new projects.

How to migrate from react-with-styles to another CSS-in-JS library?

Since react-with-styles is implementation agnostic, you can switch interfaces gradually, but migrating away requires rewriting styles using the new library's API. Start by updating the interface registration and refactoring components.

react-with-styles vs styled-components: which is better?

react-with-styles is better for avoiding vendor lock-in and theme management across libraries, while styled-components offers a more integrated, modern experience with active development. Choose based on flexibility vs. ease of use.

How to set up themes in react-with-styles?

Define a theme object with shared values like colors, then register it using WithStylesContext.Provider. The example in the README shows exporting a theme and wrapping the app with the provider.

What are the alternatives to react-with-styles?

Alternatives include styled-components for an all-in-one solution, Emotion for similar features with better performance, or Linaria for zero-runtime CSS-in-JS. The README mentions Airbnb's migration to Linaria as a reference.

How to use react-with-styles with React Native?

Install the react-with-styles-interface-react-native package and register it as the interface. The styles will adapt to React Native's styling system, but note that some web-specific features might not translate directly.

Open-Awesome

React-with-styles

MITJavaScript

A React higher-order component for CSS-in-JavaScript that supports themes and multiple styling implementations.

GitHub

1.7k stars101 forks0 contributors

What is React-with-styles?

react-with-styles is a React library that provides a unified API for CSS-in-JavaScript with theme support. It allows developers to write styles in JavaScript while remaining decoupled from specific CSS-in-JS implementations like Aphrodite or JSS. The library solves the problem of vendor lock-in by letting teams switch styling engines without refactoring component styles.

Target Audience

React developers and teams using CSS-in-JavaScript who need theme consistency and the flexibility to change styling libraries. It's particularly useful for large applications where maintaining style consistency across components is critical.

Value Proposition

Developers choose react-with-styles because it offers theme management and implementation independence in one package. Its pluggable interface system and support for multiple CSS-in-JS libraries make it a future-proof choice for styling React applications.

Overview

Use CSS-in-JavaScript with themes for React without being tightly coupled to one implementation

Use Cases

Best For

Building React applications with shared design themes
Migrating between different CSS-in-JS libraries without rewriting styles
Creating component libraries that need to support multiple styling engines
Implementing bidirectional (LTR/RTL) styling in React apps
Writing maintainable CSS-in-JavaScript with consistent theming
Decoupling style definitions from specific CSS-in-JS implementations

Not Ideal For

Projects requiring long-term, actively maintained CSS-in-JS solutions
Teams wanting a simple, out-of-the-box styling library without interface configuration
Applications that depend on modern CSS-in-JS features like zero-runtime or built-in SSR optimizations

Pros & Cons

Pros

Theme Support

Provides built-in theme access for colors, fonts, and units, enabling consistent design systems as shown in the example using color.primary.

Implementation Agnostic

Decouples styles from specific CSS-in-JS libraries via pluggable interfaces, allowing switches between Aphrodite, JSS, or React Native without code changes.

Flexible API

Offers multiple usage patterns including a higher-order component, a hook, and decorator syntax, catering to different React coding styles.

Directional Support

Integrates seamlessly with react-with-direction for LTR/RTL contexts, making it suitable for internationalized applications.

Cons

Maintenance Status

The project is in maintenance mode and will be archived, meaning no new features, bug fixes, or long-term support, as stated in the README.

Complex Setup

Requires registering themes and choosing separate interface packages, adding configuration overhead compared to integrated solutions like styled-components.

Legacy API Burden

Supports a deprecated ThemedStyleSheet singleton that will be removed, forcing migration to the context-based API for future compatibility.

Frequently Asked Questions

Related Projects

styled-components

Fast, expressive styling for React. Server components, client components, streaming SSR, React Native—one API.

Stars41,125

Forks2,688

Last commit3 days ago

Styled-jsx

Full CSS support for JSX without compromises

Stars7,776

Forks267

Last commit3 months ago

JSS

JSS is an authoring tool for CSS which uses JavaScript as a host language.

Stars7,054

Forks386

Last commit2 years ago

Aphrodite

Framework-agnostic CSS-in-JS with support for server-side rendering, browser prefixing, and minimum CSS generation

Stars5,339

Forks187

Last commit1 year ago

Community-curated · Updated weekly · 100% open source

Found a gem we're missing?

Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.

Submit a project Star on GitHub