Components are PascalCased

Use React Plugin for ESLint

useState only for dynamic data.

Standards

Organizing Imports

Large props should not be HTML inline

Use TypeScript or PropTypes

Best practices

useEffect

Forward Props in Groups

useContext

Custom Hook : Member Activity Log

useReducer

Examples

React is a JavaScript Library and Framework. Here you will find Standards, Best Practices, and Examples for React.

React

Here is a basic example of forwarding 'props' with a 'Dialog' that we want to make 'Draggable'. We are wrapping the 'Dialog' component with a 'Draggable' component that will make it able to drag to different position in the 'View Port'. We do not need to use any of the 'props' except 'label' in the wrapper so we just forward them all to the child component. 

export const DraggableDialog(props) => {
  const {labelId} = props
  nodeRef = React.useRef(null)

  return (
    <Draggable nodeRef={nodeRef} handle={`#${labelId}`} >
      <Dialog ref={nodeRef} {...props} />
    </Draggable>
  )
}

This is a more advanced example where we are forwarding a group of props that we are getting from a formik object, that uses a function to get a specific group of props.

 const {errors, touched, handleSubmit, getFieldProps, isSubmitting, isValid} = formik
 
  <TextField fullWidth size="small" type="text" label="Verification Code"
    {...getFieldProps("code")} error={Boolean(touched && errors.code)}
    helperText={touched && errors.code} />

React : Examples Forward Props in Groups

React : Examples
Forward Props in Groups