Skip to content
This repository was archived by the owner on Apr 6, 2023. It is now read-only.

Commit 6dc0743

Browse files
jpedroschmitzJoão Pedro Schmitz
jpedroschmitz
authored and
João Pedro Schmitz
committed
docs: Remove all React.FC occurrences
1 parent 3e30d98 commit 6dc0743

11 files changed

Lines changed: 30 additions & 66 deletions

‎docs/src/docs/examples/checkbox.mdx‎

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ title: Checkbox
33
description: How to create a Checkbox with Unform
44
---
55

6-
> ⚠️ All examples below are using **TypeScript**. If you're not using it, you can remove all type definitions as the `React.FC<Props>` from the component definition.
6+
> ⚠️ All examples below are using **TypeScript**. If you're not using it, you can remove all type definitions from the component definition.
77
88
## Checkbox input component
99

@@ -20,7 +20,7 @@ interface Props extends InputHTMLAttributes<HTMLInputElement> {
2020
}[];
2121
}
2222

23-
const CheckboxInput: React.FC<Props> = ({ name, options, ...rest }) => {
23+
export default function CheckboxInput({ name, options, ...rest }: Props) {
2424
const inputRefs = useRef<HTMLInputElement[]>([]);
2525
const { fieldName, registerField, defaultValue = [] } = useField(name);
2626

@@ -66,8 +66,6 @@ const CheckboxInput: React.FC<Props> = ({ name, options, ...rest }) => {
6666
</div>
6767
);
6868
};
69-
70-
export default CheckboxInput;
7169
```
7270

7371
## Usage example
@@ -85,7 +83,7 @@ interface CheckboxOption {
8583
label: string;
8684
}
8785

88-
const CheckboxForm: React.FC = () => {
86+
export default function CheckboxForm() {
8987
const formRef = useRef<FormHandles>(null);
9088

9189
const checkboxOptions: CheckboxOption[] = [
@@ -113,6 +111,4 @@ const CheckboxForm: React.FC = () => {
113111
</Form>
114112
);
115113
};
116-
117-
export default CheckboxForm;
118114
```

‎docs/src/docs/examples/file-input.mdx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ description: How to create a File Input with Unform
55

66
Enable your users to upload images or another files using Unform.
77

8-
> ⚠️ All examples below are using **TypeScript**. If you're not using it, you can remove all type definitions as the `React.FC<Props>` from the component definition.
8+
> ⚠️ All examples below are using **TypeScript**. If you're not using it, you can remove all type definitions from the component definition.
99
1010
## Image input with preview
1111

@@ -28,7 +28,7 @@ interface Props {
2828

2929
type InputProps = JSX.IntrinsicElements['input'] & Props;
3030

31-
const ImageInput: React.FC<InputProps> = ({ name, ...rest }) => {
31+
export default function ImageInput({ name, ...rest }: InputProps) {
3232
const inputRef = useRef<HTMLInputElement>(null);
3333

3434
const { fieldName, registerField, defaultValue, error } = useField(name);
@@ -68,6 +68,4 @@ const ImageInput: React.FC<InputProps> = ({ name, ...rest }) => {
6868
</>
6969
);
7070
};
71-
72-
export default ImageInput;
7371
```

‎docs/src/docs/examples/radio.mdx‎

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
title: Radio
33
---
44

5-
> ⚠️ All examples below are using **TypeScript**. If you're not using it, you can remove all type definitions as the `React.FC<Props>` from the component definition.
5+
> ⚠️ All examples below are using **TypeScript**. If you're not using it, you can remove all type definitions from the component definition.
66
77
[Click here](https://codesandbox.io/embed/unform-web-radio-example-er0cn?autoresize=1&expanddevtools=1&fontsize=14&hidenavigation=1&theme=dark) to access a Radio Input Live Demo.
88

@@ -21,7 +21,7 @@ interface Props extends InputHTMLAttributes<HTMLInputElement> {
2121
}[];
2222
}
2323

24-
const RadioInput: React.FC<Props> = ({ name, options, ...rest }) => {
24+
export default function RadioInput({ name, options, ...rest }: Props) {
2525
const inputRefs = useRef<HTMLInputElement[]>([]);
2626
const { fieldName, registerField, defaultValue = '' } = useField(name);
2727

@@ -62,14 +62,12 @@ const RadioInput: React.FC<Props> = ({ name, options, ...rest }) => {
6262
</>
6363
);
6464
};
65-
66-
export default RadioInput;
6765
```
6866

6967
## Usage example
7068

7169
```tsx lineNumbers=true
72-
const App: React.FC = () => {
70+
export default function App() {
7371
const radioOptions = [
7472
{ id: 'rocketseat', value: 'rocketseat', label: 'Rocketseat' },
7573
{ id: 'eliasgcf', value: 'eliasgcf', label: 'EliasGcf' },
@@ -91,6 +89,4 @@ const App: React.FC = () => {
9189
</Form>
9290
);
9391
};
94-
95-
export default App;
9692
```

‎docs/src/docs/examples/react-datepicker.mdx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ description: Learn how to use React DatePicker with Unform
66
[React DatePicker](https://reactdatepicker.com/) is a very simple library that
77
provides a fully customizable Date & Time input with a cool picker.
88

9-
> ⚠️ All examples below are using **TypeScript**. If you're not using it, you can remove all type definitions as the `React.FC<Props>` from the component definition.
9+
> ⚠️ All examples below are using **TypeScript**. If you're not using it, you can remove all type definitions from the component definition.
1010
1111
## Example
1212

@@ -22,7 +22,7 @@ interface Props extends Omit<ReactDatePickerProps, 'onChange'> {
2222
name: string;
2323
}
2424

25-
const DatePicker: React.FC<Props> = ({ name, ...rest }) => {
25+
export default function DatePicker({ name, ...rest }: Props) {
2626
const datepickerRef = useRef(null);
2727
const { fieldName, registerField, defaultValue, error } = useField(name);
2828

@@ -48,6 +48,4 @@ const DatePicker: React.FC<Props> = ({ name, ...rest }) => {
4848
/>
4949
);
5050
};
51-
52-
export default DatePicker;
5351
```

‎docs/src/docs/examples/react-dropzone.mdx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ title: React Dropzone
44

55
[React Dropzone](https://react-dropzone.js.org/) is a simple React hook to create a HTML5-compliant drag'n'drop zone for files.
66

7-
> ⚠️ All examples below are using **TypeScript**. If you're not using it, you can remove all type definitions as the `React.FC<Props>` from the component definition.
7+
> ⚠️ All examples below are using **TypeScript**. If you're not using it, you can remove all type definitions from the component definition.
88
99
[Click here](https://codesandbox.io/embed/unform-web-react-dropzone-example-bhk35?autoresize=1&expanddevtools=1&fontsize=14&hidenavigation=1&theme=dark) to access a React Dropzone Input Live Demo.
1010

@@ -23,7 +23,7 @@ interface InputRefProps extends HTMLInputElement {
2323
acceptedFiles: File[];
2424
}
2525

26-
const ReactDropzoneInput: React.FC<Props> = ({ name }) => {
26+
export default function ReactDropzoneInput({ name }: Props) {
2727
const inputRef = useRef<InputRefProps>(null);
2828
const { fieldName, registerField, defaultValue = [] } = useField(name);
2929

@@ -77,6 +77,4 @@ const ReactDropzoneInput: React.FC<Props> = ({ name }) => {
7777
</div>
7878
);
7979
};
80-
81-
export default ReactDropzoneInput;
8280
```

‎docs/src/docs/examples/react-input-mask.mdx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ description: Learn how to use React Input Mask with Unform
55

66
[React Input Mask](https://github.com/sanniassin/react-input-mask) offers an easy way to add masks to inputs.
77

8-
> ⚠️ All examples below are using **TypeScript**. If you're not using it, you can remove all type definitions as the `React.FC<Props>` from the component definition.
8+
> ⚠️ All examples below are using **TypeScript**. If you're not using it, you can remove all type definitions from the component definition.
99
1010
## Example
1111

@@ -19,7 +19,7 @@ interface Props extends InputProps {
1919
name: string;
2020
}
2121

22-
const InputMask: React.FC<Props> = ({ name, ...rest }) => {
22+
export default function InputMask({ name, ...rest }: Props) {
2323
const inputRef = useRef(null);
2424
const { fieldName, registerField, defaultValue, error } = useField(name);
2525

@@ -41,6 +41,4 @@ const InputMask: React.FC<Props> = ({ name, ...rest }) => {
4141
<ReactInputMask ref={inputRef} defaultValue={defaultValue} {...rest} />
4242
);
4343
};
44-
45-
export default InputMask;
4644
```

‎docs/src/docs/examples/react-native-picker-select.mdx‎

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ title: React Native Picker Select
44

55
[React Native Picker Select](https://github.com/lawnstarter/react-native-picker-select) component for React Native which emulates the native `<select>` interfaces for iOS and Android.
66

7-
> ⚠️ All examples below are using **TypeScript**. If you're not using it, you can remove all type definitions as the `React.FC<Props>` from the component definition.
7+
> ⚠️ All examples below are using **TypeScript**. If you're not using it, you can remove all type definitions from the component definition.
88
99
[Click here](https://snack.expo.io/@eliasgcf/unform-react-native-picker-select-example?session_id=snack-session-I6e6cmW7z&preview=true&platform=ios&iframeId=7pnhjsvupn&theme=light&supportedPlatforms=android,ios) to access a React Native Picker Select Live Demo.
1010

@@ -19,7 +19,7 @@ interface Props extends Omit<PickerSelectProps, 'onValueChange'> {
1919
name: string;
2020
}
2121

22-
const RNPickerSelect: React.FC<Props> = ({ name, items, ...rest }) => {
22+
export default function RNPickerSelect({ name, items, ...rest }: Props) {
2323
const pickerRef = useRef(null);
2424
const { fieldName, registerField, defaultValue = '' } = useField(name);
2525

@@ -51,13 +51,11 @@ const RNPickerSelect: React.FC<Props> = ({ name, items, ...rest }) => {
5151
/>
5252
);
5353
};
54-
55-
export default RNPickerSelect;
5654
```
5755

5856
## Usage example
5957
```tsx lineNumbers=true
60-
const App: React.FC = () => {
58+
export default function App() {
6159
const formRef = useRef<FormHandles>(null);
6260

6361
const pickerOptions = [
@@ -90,6 +88,4 @@ const App: React.FC = () => {
9088
</View>
9189
);
9290
};
93-
94-
export default App;
9591
```

‎docs/src/docs/examples/react-number-format.mdx‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ title: React Number Format
44

55
[React Number Format](https://www.npmjs.com/package/react-number-format) is a popular package that makes it easy to format inputted numbers, allowing to add prefixes, suffixes, decimal formatting and so on.
66

7-
> ⚠️ All examples below are using **TypeScript**. If you're not using it, you can remove all type definitions as the `React.FC<Props>` from the component definition.
7+
> ⚠️ All examples below are using **TypeScript**. If you're not using it, you can remove all type definitions from the component definition.
88
99
## Simple customizable number format
1010

@@ -19,12 +19,12 @@ interface IDecimalInputProps extends NumberFormatProps {
1919
suffix?: string;
2020
}
2121

22-
const DecimalInput: React.FC<IDecimalInputProps> = ({
22+
export default function DecimalInput({
2323
name,
2424
prefix,
2525
suffix,
2626
...rest
27-
}) => {
27+
}: IDecimalInputProps) {
2828
const inputRef = useRef(null);
2929
const { fieldName, defaultValue, registerField } = useField(name);
3030

@@ -69,6 +69,4 @@ const DecimalInput: React.FC<IDecimalInputProps> = ({
6969
/>
7070
);
7171
};
72-
73-
export default DecimalInput;
7472
```

‎docs/src/docs/examples/react-select.mdx‎

Lines changed: 4 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ description: Learn how to use React Select with Unform
77

88
If you're not using it, we recommend using it instead of using simple `<select>` elements as it's highly customizable and provides an incredible API as we'll se below.
99

10-
> ⚠️ All examples below are using **TypeScript**. If you're not using it, you can remove all type definitions as the `React.FC<Props>` from the component definition.
10+
> ⚠️ All examples below are using **TypeScript**. If you're not using it, you can remove all type definitions from the component definition.
1111
1212
## Simple select
1313

@@ -25,7 +25,7 @@ interface Props extends SelectProps<OptionTypeBase> {
2525
name: string;
2626
}
2727

28-
const Select: React.FC<Props> = ({ name, ...rest }) => {
28+
export default function Select({ name, ...rest }: Props) {
2929
const selectRef = useRef(null);
3030
const { fieldName, defaultValue, registerField, error } = useField(name);
3131

@@ -57,8 +57,6 @@ const Select: React.FC<Props> = ({ name, ...rest }) => {
5757
/>
5858
);
5959
};
60-
61-
export default Select;
6260
```
6361

6462
## Creatable
@@ -75,7 +73,7 @@ interface Props extends CreatableProps<OptionTypeBase> {
7573
name: string;
7674
}
7775

78-
const CreatableSelect: React.FC<Props> = ({ name, ...rest }) => {
76+
export default function CreatableSelect({ name, ...rest }: Props) {
7977
const selectRef = useRef(null);
8078
const { fieldName, defaultValue, registerField, error } = useField(name);
8179

@@ -107,8 +105,6 @@ const CreatableSelect: React.FC<Props> = ({ name, ...rest }) => {
107105
/>
108106
);
109107
};
110-
111-
export default CreatableSelect;
112108
```
113109

114110
## Async
@@ -125,7 +121,7 @@ interface Props extends AsyncProps<OptionTypeBase> {
125121
name: string;
126122
}
127123

128-
const AsyncSelect: React.FC<Props> = ({ name, ...rest }) => {
124+
export default function AsyncSelect({ name, ...rest }: Props) {
129125
const selectRef = useRef(null);
130126
const { fieldName, defaultValue, registerField, error } = useField(name);
131127

@@ -162,6 +158,4 @@ const AsyncSelect: React.FC<Props> = ({ name, ...rest }) => {
162158
/>
163159
);
164160
};
165-
166-
export default AsyncSelect;
167161
```

‎docs/src/docs/examples/react-simple-code-editor.mdx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ description: Learn how to use React Simple Code Editor with Unform
55

66
[React Simple Code Editor](http://satya164.xyz/react-simple-code-editor/) is a cool library focused on providing a simple way to add a code input source to user.
77

8-
> ⚠️ All examples below are using **TypeScript**. If you're not using it, you can remove all type definitions as the `React.FC<Props>` from the component definition.
8+
> ⚠️ All examples below are using **TypeScript**. If you're not using it, you can remove all type definitions from the component definition.
99
1010
## Syntax Highlight
1111

@@ -34,7 +34,7 @@ interface Props {
3434
name: string;
3535
}
3636

37-
const CodeInput: React.FC<Props> = ({ name }) => {
37+
export default function CodeInput({ name }: Props) {
3838
const [code, setCode] = useState('');
3939
const editorRef = useRef(null);
4040

@@ -64,6 +64,4 @@ const CodeInput: React.FC<Props> = ({ name }) => {
6464
/>
6565
);
6666
};
67-
68-
export default CodeInput;
6967
```

0 commit comments

Comments
 (0)