Typescript

Fower itself is written in TypeScript, and Fower supports TypeScript perfectly.

React

When use with React, Fower can be used in three ways:

• @fower/react component library
• Babel Preset
• JSX Pragma

@fower/react component library

When using the @fower/react component library, because the components it contains provide complete type definitions, you can directly get IntelliSense in the editor without any additional configuration.

import React from 'react'
import { Box } from '@fower/react'

export default () => {
  return (
    <Box toCenterY p-10 w-260 bgWhite rounded-10>
      <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>
  )
}

Babel Preset

Many people like the way Babel Preset. In order to get TypeScript IntelliSense, in addition to configuring the babel preset, you also need to add a type file in the project root directory, for example, we named it index.d.ts , the content is as follows:

index.d.ts

import { AtomicProps } from '@fower/atomic-props';

declare module 'react' {
  interface HTMLAttributes<T> extends AtomicProps {}
}

Then, you can get the complete IntelliSense in the component.

/src/components/Profile.tsx

import React from 'react'

export default () => {
  return (
    <div toCenterY p-10 w-260 bgWhite rounded-10>
      <img circle-48 src="/img/jobs.jpg" />
      <div ml-10>
        <h2 textXL fontBold>
          Steve Jobs
        </h2>
        <p gray800>Co-founder of Apple Inc.</p>
      </div>
    </div>
  )
}

JSX Pragma

If you use the way of JSX Pragma, you need to add the /** @jsx jsx */ pragma at the top of each component file, so that you can get TypeScript IntelliSense.

/src/components/Profile.tsx

/** @jsx jsx */
import { jsx } from '@fower/react'

export default () => {
  return (
    <div toCenterY p-10 w-260 bgWhite rounded-10>
      <img circle-48 src="/img/jobs.jpg" />
      <div ml-10>
        <h2 textXL fontBold>
          Steve Jobs
        </h2>
        <p gray800>Co-founder of Apple Inc.</p>
      </div>
    </div>
  )
}

React-Native

To use Fower in React native, you only need to install the @fower/react-native component library. @fower/react-native is written in TypeScript, and the components it contains provide complete IntelliSense.

/src/components/Profile.tsx

import React from 'react'
import { View, Text, Image } from '@fower/react-native'

export default () => {
  return (
    <View toCenterY p-10 w-260 bgWhite rounded-10>
      <Image circle-48 src="/img/jobs.jpg" />
      <View ml-10>
        <View textXL fontBold>
          Steve Jobs
        </View>
        <Text gray800>Co-founder of Apple Inc.</Text>
      </View>
    </View>
  )
}