Skip to content

Adds imports in module decleration #130

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
arshadkazmi42 wants to merge 24 commits into from
Closed

Adds imports in module decleration #130

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
24 commits
Select commit Hold shift + click to select a range
36189a1
Added `React.ComponentProps<typeof Component>
piotrwitek Jan 24, 2019
533ea05
Added missing quote
piotrwitek Jan 24, 2019
92c9a5c
Add the example for useContext (#127)
sosukesuzuki Jan 26, 2019
38ccf55
Add useState example (#128)
sosukesuzuki Jan 26, 2019
446654f
Add examples for Context API (#129)
sosukesuzuki Jan 26, 2019
cbe31d9
Adds imports in module decleration
arshadkazmi42 Jan 30, 2019
fa0d274
README_SOURCE update and README generated using script
arshadkazmi42 Jan 30, 2019
23764a8
Added `React.ComponentProps<typeof Component>
piotrwitek Jan 24, 2019
d0e76f6
Added missing quote
piotrwitek Jan 24, 2019
bb8c555
Adds imports in module decleration
arshadkazmi42 Jan 30, 2019
b32ad8b
README_SOURCE update and README generated using script
arshadkazmi42 Jan 30, 2019
e592043
Merge branch 'master' into import-decleration
arshadkazmi42 Feb 3, 2019
dae1c72
Merge branch 'import-decleration' of github.com:arshadkazmi42/react-r…
arshadkazmi42 Feb 3, 2019
e602f90
Added `React.ComponentProps<typeof Component>
piotrwitek Jan 24, 2019
69756f2
Added missing quote
piotrwitek Jan 24, 2019
4da6157
Adds imports in module decleration
arshadkazmi42 Jan 30, 2019
b12c89f
README_SOURCE update and README generated using script
arshadkazmi42 Jan 30, 2019
a3facd0
Merge branch 'import-decleration' of github.com:arshadkazmi42/react-r…
arshadkazmi42 Feb 3, 2019
bdec1e5
Updated tests to fix build Closed #95 (#133)
piotrwitek Feb 3, 2019
8ccc7c8
Adds imports in module decleration
arshadkazmi42 Jan 30, 2019
9ee8c3f
README_SOURCE update and README generated using script
arshadkazmi42 Jan 30, 2019
e32c653
Added `React.ComponentProps<typeof Component>
piotrwitek Jan 24, 2019
05fd17f
Added missing quote
piotrwitek Jan 24, 2019
943e259
Merge branch 'import-decleration' of github.com:arshadkazmi42/react-r…
arshadkazmi42 Feb 4, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Next Next commit
Added `React.ComponentProps<typeof Component>
  • Loading branch information
@piotrwitek
piotrwitek committed Jan 24, 2019
commit 36189a1674ba29c396c2536fdee1d5290cc3c152
18 changes: 9 additions & 9 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -109,16 +109,20 @@ npm i -D @types/react @types/react-dom @types/react-redux
#### `React.FunctionComponent<P>` or `React.FC<P>`
Type representing a functional component
```tsx
const MyComponent: React.FC<MyComponentProps> = ...
const MyComponent: React.FC<Props> = ...
```
[⇧ back to top](#table-of-contents)

#### `React.Component<P, S>`
Type representing a class component
```tsx
class MyComponent extends React.Component<MyComponentProps, State> { ...
class MyComponent extends React.Component<Props, State> { ...
```

#### `React.ComponentProps<typeof Component>
Gets component Props type. You don't no need to export Props from your component ever!
```tsx
type MyComponentProps = React.ComponentProps<typeof MyComponent>;
```
[⇧ back to top](#table-of-contents)

#### `React.ComponentType<P>`
Type representing union type of (FC | Component)
Expand All @@ -127,30 +131,26 @@ const withState = <P extends WrappedComponentProps>(
WrappedComponent: React.ComponentType<P>,
) => { ...
```
[⇧ back to top](#table-of-contents)

#### `React.ReactElement<P>` or `JSX.Element`
Type representing a concept of React Element - representation of a native DOM component (e.g. `<div />`), or a user-defined composite component (e.g. `<MyComponent />`)
```tsx
const elementOnly: React.ReactElement = <div /> || <MyComponent />;
```
[⇧ back to top](#table-of-contents)

#### `React.ReactNode`
Type representing any possible type of React node (basically ReactElement (including Fragments and Portals) + primitive JS types)
```tsx
const elementOrPrimitive: React.ReactNode = 'string' || 0 || false || null || undefined || <div /> || <MyComponent />;
const Component = ({ children: React.ReactNode }) => ...
```
[⇧ back to top](#table-of-contents)

#### `React.CSSProperties`
Type representing style object in JSX (usefull for css-in-js styles)
```tsx
const styles: React.CSSProperties = { flexDirection: 'row', ...
const element = <div style={styles} ...
```
[⇧ back to top](#table-of-contents)

#### `React.ReactEventHandler<E>`
Type representing generic event handler
Expand All @@ -159,7 +159,6 @@ const handleChange: React.ReactEventHandler<HTMLInputElement> = (ev) => { ... }

<input onChange={handleChange} ... />
```
[⇧ back to top](#table-of-contents)

#### `React.MouseEvent<E>` | `React.KeyboardEvent<E>` | `React.TouchEvent<E>` etc...
Type representing more specific event handler
Expand All @@ -168,6 +167,7 @@ const handleChange = (ev: React.MouseEvent<HTMLDivElement>) => { ... }

<div onMouseMove={handleChange} ... />
```

[⇧ back to top](#table-of-contents)

---
Expand Down
18 changes: 9 additions & 9 deletions README_SOURCE.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -109,16 +109,20 @@ npm i -D @types/react @types/react-dom @types/react-redux
#### `React.FunctionComponent<P>` or `React.FC<P>`
Type representing a functional component
```tsx
const MyComponent: React.FC<MyComponentProps> = ...
const MyComponent: React.FC<Props> = ...
```
[⇧ back to top](#table-of-contents)

#### `React.Component<P, S>`
Type representing a class component
```tsx
class MyComponent extends React.Component<MyComponentProps, State> { ...
class MyComponent extends React.Component<Props, State> { ...
```

#### `React.ComponentProps<typeof Component>
Gets component Props type. You don't no need to export Props from your component ever!
```tsx
type MyComponentProps = React.ComponentProps<typeof MyComponent>;
```
[⇧ back to top](#table-of-contents)

#### `React.ComponentType<P>`
Type representing union type of (FC | Component)
Expand All @@ -127,30 +131,26 @@ const withState = <P extends WrappedComponentProps>(
WrappedComponent: React.ComponentType<P>,
) => { ...
```
[⇧ back to top](#table-of-contents)

#### `React.ReactElement<P>` or `JSX.Element`
Type representing a concept of React Element - representation of a native DOM component (e.g. `<div />`), or a user-defined composite component (e.g. `<MyComponent />`)
```tsx
const elementOnly: React.ReactElement = <div /> || <MyComponent />;
```
[⇧ back to top](#table-of-contents)

#### `React.ReactNode`
Type representing any possible type of React node (basically ReactElement (including Fragments and Portals) + primitive JS types)
```tsx
const elementOrPrimitive: React.ReactNode = 'string' || 0 || false || null || undefined || <div /> || <MyComponent />;
const Component = ({ children: React.ReactNode }) => ...
```
[⇧ back to top](#table-of-contents)

#### `React.CSSProperties`
Type representing style object in JSX (usefull for css-in-js styles)
```tsx
const styles: React.CSSProperties = { flexDirection: 'row', ...
const element = <div style={styles} ...
```
[⇧ back to top](#table-of-contents)

#### `React.ReactEventHandler<E>`
Type representing generic event handler
Expand All @@ -159,7 +159,6 @@ const handleChange: React.ReactEventHandler<HTMLInputElement> = (ev) => { ... }

<input onChange={handleChange} ... />
```
[⇧ back to top](#table-of-contents)

#### `React.MouseEvent<E>` | `React.KeyboardEvent<E>` | `React.TouchEvent<E>` etc...
Type representing more specific event handler
Expand All @@ -168,6 +167,7 @@ const handleChange = (ev: React.MouseEvent<HTMLDivElement>) => { ... }

<div onMouseMove={handleChange} ... />
```

[⇧ back to top](#table-of-contents)

---
Expand Down