Use with react

Fower is great fit for React-like framework or library, Let's get started with React.

Installation

npm

npm install @fower/react

yarn

yarn add @fower/react

pnpm

pnpm add @fower/react

Usage with Box component

Now we're going to build a user profile card ui with Box component:

import { Box } from '@fower/react'

Result

Loading...

Live Editor

<Box bgGray100 p6> <Box toCenterY p-10 w-260 bgWhite rounded-10 shadowMD> <Box as="img" circle-48 src="/img/jobs.jpg" /> <Box ml-10> <Box textXL fontBold> Steve Jobs </Box> <Box as="span" gray800> Co-founder of Apple Inc. </Box> </Box> </Box> </Box>

<Box bgGray100 p6>
  <Box toCenterY p-10 w-260 bgWhite rounded-10 shadowMD>
    <Box as="img" circle-48 src="/img/jobs.jpg" />
    <Box ml-10>
      <Box textXL fontBold>
        Steve Jobs
      </Box>
      <Box as="span" gray800>
        Co-founder of Apple Inc.
      </Box>
    </Box>
  </Box>
</Box>

As you can see, we can build a more complex interface with few code. At first glance, you might say: "Isn't this a disguised inline style?" This is indeed similar to the inline style. They both write the style on JSX, but maybe this is the only similarity of them. The way to writing styles of Fower, I call it "Atomic props".

Compared with inline style, "Atomic props" has many advantages:

• Less Code, inline styles has a larger amount of code, which can easily make JSX messy, but "Atomic props" retains the simplicity of JSX and is more readable.

• Style reuse, using inline styles, it is easy to quickly expand the code, using "Atomic props", the code size will not expand too much as the project grows.

Example source code

You can view the example source code in github: examples/use-with-react