@poprize/react

React + Styled components alternative in 3kb

Poprize is a minimal framework for minimalist people.

Motivation

Why not build the smallest existing framework with React compatible api, and Styled components? This question culminated in the creation of this framework.

Bundle size used to be more important, I agree, but even today, a large part of the world's population uses input devices, and has a poor mobile connection. One of the most popular stacks for website creation is React + Styled Components, however, including just these two libraries in your project will add considerable size to your Bundle. This library allows you to code with your favorite syntax, but without adding extra size to your website,

Attributes

• Use Fibers
• Support Concurrent Mode
• O(n) algorithm, performance linear with 10 or 1000000000 of elements
• Is really fast, 3x faster than React to adding items (see benchmark)
• A really nice Schedule, with a fast first frame.
• You can use with Vite using this plugin

import { h, useState } from "@poprize/react"

const Counter = () => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>+</button>
      <button onClick={() => setCount(count - 1)}>-</button>
      <p>Count: {count}</p>
    </div>
  );
};

render(<Counter />, document.getElementById("root"));

Do you want style it?

import { h, useState } from "@poprize/react"

const Button = styled.button`
  font-size: 1.5rem;
  padding: 0.5rem;
  margin: 0.5rem;
  border-radius: 5px;
  border: none;
  background-color: palevioletred;
  color: white;
`;

const Counter = () => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <Button onClick={() => setCount(count + 1)}>+</Button>
      <Button onClick={() => setCount(count - 1)}>-</Button>
      <p>Count: {count}</p>
    </div>
  );
};

Hooks

• [useState]

• [useEffect]

• [useLayoutEffect]

• [useMemo]

• [useReducer]

• [useCallback]

• [useRef]

• [useContext]

• [useImperativeHandle]

• [useTransition]

Vite plugin

If you are using vite, you do not need to add the import import { h, useState } from "@poprize/react" just add to your dependencies, the package @poprize/plugin-vite with npm install @poprize/plugin-vite --dev or yarn add @poprize/plugin-vite --dev

Using typescript

This library was written in TS. To work with tsx files, you need add this configuration to your tsconfig.json (if not present):

    "jsx": "react-jsx",
    "jsxImportSource": "@poprize/react"