open-index/open-npm huggingface dataset:
npm package: @poprize/react
Description: Poprize is a minimal framework for minimalist people.
Latest version: 0.9.23

# 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


```tsx
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?

```tsx
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):
```json
    "jsx": "react-jsx",
    "jsxImportSource": "@poprize/react"
```