mimic-react-native
v1.2.2
Published
Used to mimic react-native components in react-dom
Downloads
4
Readme
mimic-react-native
Used to mimic react-native components in react-dom
Click here to see in npmjs.com
Under Development
Install
npm install mimic-react-native
Usage
Changing from react-native to react-dom
Change react-native
imports to mimic-react-native
E.g:
import {View, Text} from 'react-native' //DELETE
import {View, Text} from 'mimic-react-native' //ADD
Using Directly in react-dom
import React, { useState } from 'react'
//Only these components are currently functioning. This library is still under development.
import {
View,
Text,
TextInput,
ScrollView,
Button,
Switch,
Flatlist
} from 'mimic-react-native'
const ExampleApp = () => {
const [checked, setChecked] = useState(false)
return (
<View>
<Text style={{ color: 'red' }}>five</Text>
<TextInput onChangeText={() => console.log(5)} />
<ScrollView>5</ScrollView>
<Button>button</Button>
<Switch onValueChange={() => setChecked(!checked)} value={checked} />
<FlatList
keyExtractor={(item) => item.key}
data={data}
renderItem={({ item }: any) => <p>{item.name}</p>}
/>
</View>
)
}
export default App
API:
<View>
, <ScrollView>
, <SafeAreaView>
These three are the same component exported in different names.
import { View } from 'mimic-react-native'
export default function () {
return <View {...props}>{children}</View>
}
| prop | value | required | | --------- | --------------------------- | -------- | | children | React.ReactNode (or) string | No | | style | React.CSSProperties | No | | className | string | No | | id | string | No |
<Text>
import { View, Text } from 'mimic-react-native'
export default function () {
return (
<View>
<Text elementType='h1'>children</Text>
</View>
)
}
| prop | Allowed values | required | default | | ----------- | -------------------------------------------- | -------- | ------- | | elementType | 'p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'a' | No | 'p' | | children | React.ReactNode (or) string | Yes | | style | React.CSSProperties | No | | className | string | No | | id | string | No |
<Image>
import { View, Image } from 'mimic-react-native'
export default function () {
return (
<View>
<Image source={{ uri: 'image://url' }} />
</View>
)
}
| prop | Allowed values | required | | --------- | ------------------- | -------- | | source | { uri: string } | Yes | | style | React.CSSProperties | No | | className | string | No | | id | string | No |
<TextInput>
import { View, TextInput } from 'mimic-react-native'
export default function () {
return (
<View>
<TextInput />
</View>
)
}
| prop | value | required | | -------------------------- | --------------------------- | -------- | | value | number (or) string | No | | onChangeText (or) onChange | function(newValue) { } | No | | children | React.ReactNode (or) string | No | | style | React.CSSProperties | No | | className | string | No | | id | string | No |
<Button>
import { Button } from 'mimic-react-native'
export default function () {
return (
<Button color='red' textColor='black'>
TEXT
</Button>
)
}
| prop | value | required | default | | -------------------- | --------------------------- | -------- | ------------------- | | dontCapitalize | boolean | No | false | | color | string | No | "rgb(33, 150, 243)" | | textColor | string | No | "#FFF" | | onPress (or) onClick | function | No | | children | React.ReactNode (or) string | No | | style | React.CSSProperties | No | | className | string | No | | id | string | No |
<Switch>
import { Switch } from 'mimic-react-native'
export default function () {
return <Switch />
}
| prop | value | required | default | | ------------- | ------------------------------- | -------- | ------------------------------------- | | size | number | No | 20 | | value | boolean | yes | false | | onValueChange | function(newValue) { } | No | | thumbColor | string | No | 'silver' | | trackColor | { true: string, false: string } | No | { true: '#81b0ff', false: '#767577' } | | children | React.ReactNode (or) string | No | | style | React.CSSProperties | No | | className | string | No | | id | string | No |
<FlatList>
import { FlatList } from 'mimic-react-native'
export default function () {
const data = [
{
key: 1,
name: 'a'
},
{
key: 2,
name: 'b'
},
{
key: 3,
name: 'c'
}
]
return (
<FlatList
keyExtractor={(item) => item.key}
data={data}
renderItem={({ item }: any) => <p>{item.name}</p>}
/>
)
}
| prop | value | required | default | | ------------ | ---------------------------- | -------- | ------- | | data | [ any ] | No | [ ] | | renderItem | ({ item }) => <Component /> | No | | keyExtractor | (item) => key | No | | children | React.ReactNode (or) string | No | | style | React.CSSProperties | No | | className | string | No | | id | string | No |
License
MIT © david-sling