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:
import { AtomicProps } from '@fower/atomic-props';
declare module 'react' { interface HTMLAttributes<T> extends AtomicProps {}}
Then, you can get the complete IntelliSense in the component.
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.
/** @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.
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> )}