This repository was archived by the owner on Oct 23, 2023. It is now read-only.
File tree 5 files changed +70
-24
lines changed
5 files changed +70
-24
lines changed Original file line number Diff line number Diff line change 1
1
<h1 align =" center " >@polymorphic-factory</h1 >
2
2
3
3
<p align =" center " >
4
- <img alt =" CodeCov " src =" https://codecov.io/gh/chakra-ui/polymorphic/branch/main/graph/badge.svg?token=GISB4HXIK7 " />
5
- <img alt =" MIT License " src =" https://img.shields.io/github/license/chakra-ui/polymorphic " />
6
- <img alt =" Github Stars " src =" https://badgen.net/github/stars/chakra-ui/polymorphic " />
4
+ <a href =" https://codecov.io/gh/chakra-ui/polymorphic " >
5
+ <img alt="CodeCov" src="https://codecov.io/gh/chakra-ui/polymorphic/branch/main/graph/badge.svg?token=GISB4HXIK7" />
6
+ </a >
7
+ <a href =" https://github.com/chakra-ui/polymorphic/blob/main/LICENSE.md " >
8
+ <img alt="MIT License" src="https://img.shields.io/github/license/chakra-ui/polymorphic" />
9
+ </a >
10
+ <a href =" https://github.com/chakra-ui/polymorphic/stargazers " >
11
+ <img alt="Github Stars" src="https://badgen.net/github/stars/chakra-ui/polymorphic" />
12
+ </a >
7
13
</p >
8
14
9
15
Create polymorphic React/Preact/SolidJS/Vue components with a customizable ` styled ` function.
Original file line number Diff line number Diff line change 1
1
<h1 align =" center " >@polymorphic-factory/preact</h1 >
2
2
3
3
<p align =" center " >
4
- <img alt =" CodeCov " src =" https://codecov.io/gh/chakra-ui/polymorphic/branch/main/graph/badge.svg?token=GISB4HXIK7 " />
5
- <img alt =" MIT License " src =" https://img.shields.io/github/license/chakra-ui/polymorphic " />
6
- <img alt =" Github Stars " src =" https://badgen.net/github/stars/chakra-ui/polymorphic " />
7
- <img alt =" Bundle Size " src =" https://badgen.net/bundlephobia/minzip/@polymorphic-factory/preact " />
8
- <img alt =" NPM Downloads " src =" https://img.shields.io/npm/dm/@polymorphic-factory/preact?style=flat " />
4
+ <a href =" https://codecov.io/gh/chakra-ui/polymorphic " >
5
+ <img alt="CodeCov" src="https://codecov.io/gh/chakra-ui/polymorphic/branch/main/graph/badge.svg?token=GISB4HXIK7&flag=preact" />
6
+ </a >
7
+ <a href =" https://github.com/chakra-ui/polymorphic/blob/main/LICENSE.md " >
8
+ <img alt="MIT License" src="https://img.shields.io/github/license/chakra-ui/polymorphic" />
9
+ </a >
10
+ <a href =" https://github.com/chakra-ui/polymorphic/stargazers " >
11
+ <img alt="Github Stars" src="https://badgen.net/github/stars/chakra-ui/polymorphic" />
12
+ </a >
13
+ <a href =" https://bundlephobia.com/package/@polymorphic-factory/preact " >
14
+ <img alt="Bundle Size" src="https://badgen.net/bundlephobia/minzip/@polymorphic-factory/preact"/>
15
+ </a >
16
+ <a href =" https://www.npmjs.com/package/@polymorphic-factory/preact " >
17
+ <img alt="NPM Downloads" src="https://img.shields.io/npm/dm/@polymorphic-factory/preact?style=flat"/>
18
+ </a >
9
19
</p >
10
20
11
21
Create polymorphic Preact components with a customizable ` styled ` function.
@@ -102,6 +112,7 @@ It still supports the `as` prop, which would replace the `OriginalComponent`.
102
112
<MyComponent as = " div" />
103
113
// renders <div />
104
114
```
115
+
105
116
## Refs
106
117
107
118
You can use ` ref ` on the component, and it will have the correct typings.
Original file line number Diff line number Diff line change 1
1
<h1 align =" center " >@polymorphic-factory/react</h1 >
2
2
3
3
<p align =" center " >
4
- <img alt =" CodeCov " src =" https://codecov.io/gh/chakra-ui/polymorphic/branch/main/graph/badge.svg?token=GISB4HXIK7 " />
5
- <img alt =" MIT License " src =" https://img.shields.io/github/license/chakra-ui/polymorphic " />
6
- <img alt =" Github Stars " src =" https://badgen.net/github/stars/chakra-ui/polymorphic " />
7
- <img alt =" Bundle Size " src =" https://badgen.net/bundlephobia/minzip/@polymorphic-factory/react " />
8
- <img alt =" NPM Downloads " src =" https://img.shields.io/npm/dm/@polymorphic-factory/react?style=flat " />
4
+ <a href =" https://codecov.io/gh/chakra-ui/polymorphic " >
5
+ <img alt="CodeCov" src="https://codecov.io/gh/chakra-ui/polymorphic/branch/main/graph/badge.svg?token=GISB4HXIK7&flag=react" />
6
+ </a >
7
+ <a href =" https://github.com/chakra-ui/polymorphic/blob/main/LICENSE.md " >
8
+ <img alt="MIT License" src="https://img.shields.io/github/license/chakra-ui/polymorphic" />
9
+ </a >
10
+ <a href =" https://github.com/chakra-ui/polymorphic/stargazers " >
11
+ <img alt="Github Stars" src="https://badgen.net/github/stars/chakra-ui/polymorphic" />
12
+ </a >
13
+ <a href =" https://bundlephobia.com/package/@polymorphic-factory/react " >
14
+ <img alt="Bundle Size" src="https://badgen.net/bundlephobia/minzip/@polymorphic-factory/react"/>
15
+ </a >
16
+ <a href =" https://www.npmjs.com/package/@polymorphic-factory/react " >
17
+ <img alt="NPM Downloads" src="https://img.shields.io/npm/dm/@polymorphic-factory/react?style=flat"/>
18
+ </a >
9
19
</p >
10
20
11
21
Create polymorphic React components with a customizable ` styled ` function.
Original file line number Diff line number Diff line change 1
1
<h1 align =" center " >@polymorphic-factory/solid</h1 >
2
2
3
3
<p align =" center " >
4
- <img alt =" CodeCov " src =" https://codecov.io/gh/chakra-ui/polymorphic/branch/main/graph/badge.svg?token=GISB4HXIK7 " />
5
- <img alt =" MIT License " src =" https://img.shields.io/github/license/chakra-ui/polymorphic " />
6
- <img alt =" Github Stars " src =" https://badgen.net/github/stars/chakra-ui/polymorphic " />
7
- <img alt =" Bundle Size " src =" https://badgen.net/bundlephobia/minzip/@polymorphic-factory/solid " />
8
- <img alt =" NPM Downloads " src =" https://img.shields.io/npm/dm/@polymorphic-factory/solid?style=flat " />
4
+ <a href =" https://codecov.io/gh/chakra-ui/polymorphic " >
5
+ <img alt="CodeCov" src="https://codecov.io/gh/chakra-ui/polymorphic/branch/main/graph/badge.svg?token=GISB4HXIK7&flag=solid" />
6
+ </a >
7
+ <a href =" https://github.com/chakra-ui/polymorphic/blob/main/LICENSE.md " >
8
+ <img alt="MIT License" src="https://img.shields.io/github/license/chakra-ui/polymorphic" />
9
+ </a >
10
+ <a href =" https://github.com/chakra-ui/polymorphic/stargazers " >
11
+ <img alt="Github Stars" src="https://badgen.net/github/stars/chakra-ui/polymorphic" />
12
+ </a >
13
+ <a href =" https://bundlephobia.com/package/@polymorphic-factory/solid " >
14
+ <img alt="Bundle Size" src="https://badgen.net/bundlephobia/minzip/@polymorphic-factory/solid"/>
15
+ </a >
16
+ <a href =" https://www.npmjs.com/package/@polymorphic-factory/solid " >
17
+ <img alt="NPM Downloads" src="https://img.shields.io/npm/dm/@polymorphic-factory/solid?style=flat"/>
18
+ </a >
9
19
</p >
10
20
11
21
Create polymorphic SolidJS components with a customizable ` styled ` function.
@@ -14,7 +24,6 @@ A polymorphic component is a component that can be rendered with a different ele
14
24
for component libraries that want to provide a consistent API for their users and want to allow them
15
25
to customize the underlying element.
16
26
17
-
18
27
## Installation
19
28
20
29
``` bash
Original file line number Diff line number Diff line change 1
1
<h1 align =" center " >@polymorphic-factory/vue</h1 >
2
2
3
3
<p align =" center " >
4
- <img alt =" CodeCov " src =" https://codecov.io/gh/chakra-ui/polymorphic/branch/main/graph/badge.svg?token=GISB4HXIK7 " />
5
- <img alt =" MIT License " src =" https://img.shields.io/github/license/chakra-ui/polymorphic " />
6
- <img alt =" Github Stars " src =" https://badgen.net/github/stars/chakra-ui/polymorphic " />
7
- <img alt =" Bundle Size " src =" https://badgen.net/bundlephobia/minzip/@polymorphic-factory/vue " />
8
- <img alt =" NPM Downloads " src =" https://img.shields.io/npm/dm/@polymorphic-factory/vue?style=flat " />
4
+ <a href =" https://codecov.io/gh/chakra-ui/polymorphic " >
5
+ <img alt="CodeCov" src="https://codecov.io/gh/chakra-ui/polymorphic/branch/main/graph/badge.svg?token=GISB4HXIK7&flag=vue" />
6
+ </a >
7
+ <a href =" https://github.com/chakra-ui/polymorphic/blob/main/LICENSE.md " >
8
+ <img alt="MIT License" src="https://img.shields.io/github/license/chakra-ui/polymorphic" />
9
+ </a >
10
+ <a href =" https://github.com/chakra-ui/polymorphic/stargazers " >
11
+ <img alt="Github Stars" src="https://badgen.net/github/stars/chakra-ui/polymorphic" />
12
+ </a >
13
+ <a href =" https://bundlephobia.com/package/@polymorphic-factory/vue " >
14
+ <img alt="Bundle Size" src="https://badgen.net/bundlephobia/minzip/@polymorphic-factory/vue" />
15
+ </a >
16
+ <a href =" https://www.npmjs.com/package/@polymorphic-factory/vue " >
17
+ <img alt="NPM Downloads" src="https://img.shields.io/npm/dm/@polymorphic-factory/vue?style=flat"/>
18
+ </a >
9
19
</p >
10
20
11
21
Create polymorphic VueJS components with a customizable ` styled ` function.
You can’t perform that action at this time.
0 commit comments