blakeembrey / React Free Style
Licence: mit
Make React components easier and more maintainable by using inline style objects
Stars: ✭ 135
Programming Languages
typescript
32286 projects
Projects that are alternatives of or similar to React Free Style
Nano Component
Fast & simple React component styles in under 1kb
Stars: ✭ 202 (+49.63%)
Mutual labels: react-components, css-in-js
React Stylesheet
Component based styling for your React applications
Stars: ✭ 150 (+11.11%)
Mutual labels: react-components, css-in-js
React Awesome Reveal
React components to add reveal animations using the Intersection Observer API and CSS Animations.
Stars: ✭ 346 (+156.3%)
Mutual labels: react-components, css-in-js
Styled Bootstrap
💅🏻 A styled-component implementation of Bootstrap
Stars: ✭ 154 (+14.07%)
Mutual labels: react-components, css-in-js
react-awesome-reveal
React components to add reveal animations using the Intersection Observer API and CSS Animations.
Stars: ✭ 564 (+317.78%)
Mutual labels: react-components, css-in-js
Reactackle
Open-source components library built with React and Styled-Components.
Stars: ✭ 278 (+105.93%)
Mutual labels: react-components, css-in-js
React Native Web
React Native Components and APIs for the Web
Stars: ✭ 19,563 (+14391.11%)
Mutual labels: react-components, css-in-js
React Rainbow
🌈 React Rainbow Components. Build your web application in a snap.
Stars: ✭ 1,662 (+1131.11%)
Mutual labels: react-components
React Splitters
React splitter component, written in TypeScript.
Stars: ✭ 127 (-5.93%)
Mutual labels: react-components
Gakki
🌼🌸 A React Native App for Mastodon. 一个由React Native编写的长毛象客户端App🦋
Stars: ✭ 120 (-11.11%)
Mutual labels: react-components
Gatsby Docs Kit
📃Easy to Maintain Markdown/React Documentation Static Websites
Stars: ✭ 117 (-13.33%)
Mutual labels: react-components
Styled By
Simple and powerful lib to handle styled props in your components
Stars: ✭ 122 (-9.63%)
Mutual labels: css-in-js
React Structured Data
React Structured Data provides an easy way to add structured data to your React apps
Stars: ✭ 120 (-11.11%)
Mutual labels: react-components
Figma Theme
Generate development-ready theme JSON files from Figma Styles
Stars: ✭ 130 (-3.7%)
Mutual labels: css-in-js
React Lazy
Universal lazy loader components using IntersectionObserver for React
Stars: ✭ 118 (-12.59%)
Mutual labels: react-components
React Json Schema
Configure and build views using JSON schemas mapped to React components
Stars: ✭ 131 (-2.96%)
Mutual labels: react-components
React Next Boilerplate
🚀 A basis for reducing the configuration of your projects with nextJS, best development practices and popular libraries in the developer community.
Stars: ✭ 129 (-4.44%)
Mutual labels: css-in-js
Rxjs Diagrams
React Components for visualising RxJS observables and operators
Stars: ✭ 126 (-6.67%)
Mutual labels: react-components
Css In Js
A thorough analysis of all the current CSS-in-JS solutions with SSR & TypeScript support for Next.js
Stars: ✭ 127 (-5.93%)
Mutual labels: css-in-js
React Free Style
React Free Style combines Free Style with React.js by managing the style of React components dynamically. Works with server-side rendering, where only styles of rendered components will print.
Why?
Check out why you should be doing CSS in JS. This module exposes the API directly to React.js.
Even more improvements with React Free Style
- Modular React.js components
- Style debugging in development mode
- Fast renders with automatic style for rendered React components
- Supports universal/isomorphic applications
Installation
npm install react-free-style --save
Usage
Styled
import { styled } from "react-free-style";
const Button = styled("button", {
backgroundColor: "red",
});
const App = () => {
return <Button css={{ color: "blue" }}>Hello world!</Button>;
};
JSX
/** @jsx jsx */
import { jsx } from "react-free-style";
const App = () => {
return (
<button css={{ color: "blue", backgroundColor: "red" }}>
Hello world!
</button>
);
};
Imperative
import { css, useCss } from "react-free-style";
// Creates "cached CSS":
const style = css({ color: "red" });
// But you can also write `const style = { color: "red" }`.
const Button = () => {
const className = useCss(style);
return <button className={className}>Hello world!</button>;
};
This is how the styled and jsx work! Knowing how it works can help you when you need to extract the class name for integrating with an existing UI library using className.
Recipes
Valid Styles
Every CSS method accepts:
- CSS-in-JS object
- String, i.e. a class name
- Cached CSS, created using the
css(...)method - Computed CSS, a function which accepts
Styleand returns a valid style - Array of the above
Composition
Components created using styled expose "cached CSS" on the style property.
const LargeButton = styled("button", [
{
fontSize: 16,
},
Button.style,
{
marginBottom: 8,
},
]);
Animations
A "computed CSS" function can be used to register and use @keyframes.
import { css } from "react-free-style";
const style = css((Style) => {
const animationName = Style.registerStyle({
$global: true,
"@keyframes &": styles,
});
return { animationName };
});
Themes
CSS Variables
The most effective CSS themes I've seen use CSS variables to dynamically change styles.
// Register this CSS wherever you want the theme to apply, e.g. `:root`.
const theme = {
"--color": "red",
};
const Button = styled("button", {
color: "var(--color)",
});
// Later on you can change the theme.
const style = css({
"--color": "blue",
});
Context
Use React.Context to define a theme and custom components with css props.
const ThemeContext = React.createContext({
color: "red",
});
const Button = () => {
const theme = React.useContext(ThemeContext);
return <button css={{ color: theme.color }}>Hello world!</button>;
};
Rendering
By default, CSS output is discarded (a "no op" useful for testing) because you may have different output requirements depending on the environment.
Client-side Rendering
StyleSheetRenderer is an efficient CSS renderer for browsers.
import { StyleSheetRenderer, Context } from "react-free-style";
// const renderer = new NoopRenderer();
const renderer = new StyleSheetRenderer();
React.render(
<Context.Provider value={renderer}>
<App />
</Context.Provider>,
document.body
);
Server-side Rendering
MemoryRenderer collects all styles in-memory for output at a later time.
import { MemoryRenderer, Context } from "react-free-style";
// const renderer = new NoopRenderer();
const renderer = new MemoryRenderer();
const content = ReactDOM.renderToString(
<Context.Provider value={renderer}>
<App />
</Context.Provider>,
document.body
);
const html = `
<!doctype html>
<html>
<head>
${renderer.toString()}
</head>
<body>
<div id="content">
${content}
</div>
</body>
</html>
`;
License
MIT license
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].