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>  )}