kylefang/react
1
0
Fork 0
mirror of https://github.com/zhigang1992/react.git synced 2026-03-26 22:42:51 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore(examples): add example for extends components

Browse Source
This commit is contained in:
unix
2020-06-08 04:44:51 +08:00
parent 4cd913f12a
commit bc900b6867
8 changed files with 127 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
examples/extends-components/README.md Normal file
View File

@@ -0,0 +1,15 @@
## Extends Components
This is an example of **how to inherit components in `zeit-ui`**.
## Getting Started
First, run the development server:
```bash
npm i && npm run dev
# or
yarn && yarn dev
```
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.

26
examples/extends-components/package.json Normal file
View File

@@ -0,0 +1,26 @@
{
"name": "zeit-ui-react-extends-components",
"version": "1.0.0",
"main": "index.js",
"dependencies": {
"@zeit-ui/react": "latest",
"react": "^16.12.0",
"react-dom": "^16.12.0"
},
"devDependencies": {
"@types/react": "16.9.19",
"@types/react-dom": "16.9.5",
"react-scripts": "^3.4.1",
"typescript": "3.7.5"
},
"scripts": {
"dev": "react-scripts start",
"build": "react-scripts build"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
]
}

11
examples/extends-components/public/index.html Normal file
View File

@@ -0,0 +1,11 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Extends Components</title>
</head>
<body>
<div id="app"></div>
</body>
</html>

14
examples/extends-components/src/app.tsx Normal file
View File

@@ -0,0 +1,14 @@
import * as React from 'react'
import MyInput from './my-input'
import { ZeitProvider, CssBaseline, Page } from '@zeit-ui/react'
export default function App() {
return (
<ZeitProvider>
<CssBaseline />
<Page size="mini">
<MyInput error="this is required" placeholder="my input" />
</Page>
</ZeitProvider>
)
}

7
examples/extends-components/src/index.tsx Normal file
View File

@@ -0,0 +1,7 @@
import * as React from 'react'
import { render } from 'react-dom'
import App from './app'
const rootElement = document.getElementById('app')
render(<App />, rootElement)

29
examples/extends-components/src/my-input.tsx Normal file
View File

@@ -0,0 +1,29 @@
import React, { ReactElement } from 'react'
import { Input, Spacer, Text } from '@zeit-ui/react'
type InputErrorType = {
error?: string
}
const MyInput: React.FC<InputErrorType & React.ComponentProps<typeof Input>> = ({
error = null,
...inputProps
}): ReactElement => {
const hasError = Boolean(error)
const { status } = inputProps
return (
<>
<Input status={hasError ? 'error' : status} {...inputProps} />
{hasError && (
<>
<Spacer y={0.4} />
<Text small type="error" size="var(--size-xs2)">
{error}
</Text>
</>
)}
</>
)
}
export default MyInput

1
examples/extends-components/src/react-app-env.d.ts vendored Normal file
View File

@@ -0,0 +1 @@
/// <reference types="react-scripts" />

24
examples/extends-components/tsconfig.json Normal file
View File

@@ -0,0 +1,24 @@
{
"include": [
"./src/*"
],
"compilerOptions": {
"strict": true,
"esModuleInterop": true,
"lib": [
"dom",
"es2015"
],
"jsx": "react",
"target": "es5",
"allowJs": true,
"skipLibCheck": true,
"allowSyntheticDefaultImports": true,
"forceConsistentCasingInFileNames": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true
}
}