Create Generic Custom Component React

Question

This is react-native question but similar concepts can be applied to react.

I want to create a CustomView in react-native. I am using typescript.

So far, I have:

const styles = StyleSheet.create({
  container: {
    backgroundColor: '#ffffff',
    borderRadius: 10,
  }
});

type CustomViewProps= {
  width: number,
  height: number,
  marginTop?: string | number,
}

const CustomView = ({ width, height, marginTop }: CustomViewProps) => (
  <View style={[styles.container, { height, width, marginTop }]} />
);

This is ok so far because only 3 props are being used: width, height and marginTop.

However, this is not reusable and it can become verbose if I need to add many more props.

So, the question is: How can I make CustomView receive any props as a native component View could receive?

My guess is I should delete CustomViewProps. Then, I should make the props inherit from the same type that the native component View does. However, I am struggling with it.

vitosorriso · Accepted Answer · 2020-03-21 12:46:17Z

Since you are creating CustomViewProps, I assume that you want to add some specific behaviours to your native component above the already written behaviours of that component.

Let's create an example.

I want to create a button with some specific behaviours but i want it to behave, in other cases, like a normal TouchableOpacity component. For example, i want to add a "loading" state which will show a loader inside instead of its content. So the logic is: create your custom props and merge you custom props with native's default props

import React, { FC, ReactElement } from 'react'
import { ActivityIndicator, TouchableOpacity, TouchableOpacityProps, StyleSheet } from 'react-native'

type MyProps = {
  loading?: boolean
  children: ReactElement
}

const MyButton: FC<MyProps & TouchableOpacityProps> = (props: MyProps & TouchableOpacityProps) => (
  <TouchableOpacity {...props} disabled={props.disabled || props.loading} style={[styles.button, props.style]}>
    {props.loading ? <ActivityIndicator /> : props.children}
  </TouchableOpacity>
)

const styles = StyleSheet.create({
  button: {
    backgroundColor: 'yellow',
    borderColor: 'black',
    borderWidth: 1,
    borderRadius: 10,
    padding: 10
  },
})

export default MyButton

The loading prop will be responsible for both content of the button or is disabled prop. The TouchableOpacity component will receive every compatible prop (autosuggest will be enabled because you have assigned the TouchableOpacityProps). The styles.button will behave like default style but will be overwritten if you specify something different in your style prop. That's it!

Your answer is gold. I just applied it to my component and got it. Thanks!

Collectives™ on Stack Overflow

Create Generic Custom Component React

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related