Use with react

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

Installation#

npm install @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'
SyntaxError: Unexpected token (1:8)
1 : return ()
            ^
LIVE DEMO

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.

Use in HTML elements#

Atomic Props can also be used directly in html elements. In other words, you can directly add Atomic Props to html tags, the code is similar to the following:

<div p6 textXL bgRed200>  Use fower in HTML tag</div>

To use Atomic Props in html elements, you should add a babel preset @fower/babel-preset-fower to the project by configuring babel.

.babelrc
{  "presets": ["@fower/babel-preset-fower"]}

Then, you can use Atomic Props in HTML elements:

import React from 'react'
export default () => {  return (    <div p6 textXL bgRed200>      Use fower with Babel Preset    </div>  )}

Note that if you want to get TypeScript type hints, you need to extend the attribute types of HTML by creating a new d.ts file in the project root directory, you can name it index.d.ts, the code is as follows:

index.d.ts
import 'react'import { AtomicProps } from '@fower/atomic-props';
declare module 'react' {  interface HTMLAttributes<T> extends AtomicProps {}}

hint

Example source code#

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