@blade-flags/react 0.1.0 → 0.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +62 -0
- package/package.json +4 -3
package/README.md
ADDED
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
# @blade-flags/react
|
|
2
|
+
|
|
3
|
+
React flag components powered by [`@blade-flags/core`](https://www.npmjs.com/package/@blade-flags/core). 1,759 SVG country and language flags across three styles.
|
|
4
|
+
|
|
5
|
+
Part of [blade-flags](https://github.com/MohmmedAshraf/blade-flags). See also [`@blade-flags/vue`](https://www.npmjs.com/package/@blade-flags/vue).
|
|
6
|
+
|
|
7
|
+
## Installation
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
npm install @blade-flags/core @blade-flags/react
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
## Usage
|
|
14
|
+
|
|
15
|
+
```tsx
|
|
16
|
+
import { Flag } from '@blade-flags/react'
|
|
17
|
+
import { circleFlags } from '@blade-flags/core/flags/circle'
|
|
18
|
+
|
|
19
|
+
function UserProfile({ user }) {
|
|
20
|
+
return (
|
|
21
|
+
<>
|
|
22
|
+
<Flag code={user.country} flags={circleFlags} />
|
|
23
|
+
<Flag code="ar-sa" type="language" flags={circleFlags} />
|
|
24
|
+
</>
|
|
25
|
+
)
|
|
26
|
+
}
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
### Props
|
|
30
|
+
|
|
31
|
+
| Prop | Type | Default | Description |
|
|
32
|
+
|------|------|---------|-------------|
|
|
33
|
+
| `code` | `string` | required | Country or language code (e.g. `us`, `ar-sa`) |
|
|
34
|
+
| `flags` | `FlagMap` | required | Flag variant map to resolve from |
|
|
35
|
+
| `type` | `'country' \| 'language'` | `'country'` | Whether the code is a country or language |
|
|
36
|
+
|
|
37
|
+
The component also accepts all standard `<span>` HTML attributes and forwards refs.
|
|
38
|
+
|
|
39
|
+
### AutoFlag
|
|
40
|
+
|
|
41
|
+
Convenience component that accepts a `variant` string prop (bundles all variants):
|
|
42
|
+
|
|
43
|
+
```tsx
|
|
44
|
+
import { AutoFlag } from '@blade-flags/react'
|
|
45
|
+
|
|
46
|
+
<AutoFlag code="us" variant="circle" />
|
|
47
|
+
<AutoFlag code="ar" type="language" variant="flat" />
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
### Variants
|
|
51
|
+
|
|
52
|
+
Import only the variant you need to keep your bundle small:
|
|
53
|
+
|
|
54
|
+
```js
|
|
55
|
+
import { defaultFlags } from '@blade-flags/core/flags/default'
|
|
56
|
+
import { circleFlags } from '@blade-flags/core/flags/circle'
|
|
57
|
+
import { flatFlags } from '@blade-flags/core/flags/flat'
|
|
58
|
+
```
|
|
59
|
+
|
|
60
|
+
## License
|
|
61
|
+
|
|
62
|
+
[MIT](https://github.com/MohmmedAshraf/blade-flags/blob/main/LICENSE.md)
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@blade-flags/react",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.2",
|
|
4
4
|
"description": "React flag components powered by @blade-flags/core",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"type": "module",
|
|
@@ -15,7 +15,8 @@
|
|
|
15
15
|
"module": "./dist/index.js",
|
|
16
16
|
"types": "./dist/index.d.ts",
|
|
17
17
|
"files": [
|
|
18
|
-
"dist"
|
|
18
|
+
"dist",
|
|
19
|
+
"README.md"
|
|
19
20
|
],
|
|
20
21
|
"publishConfig": {
|
|
21
22
|
"access": "public"
|
|
@@ -28,7 +29,7 @@
|
|
|
28
29
|
"@types/react": "^19.0.0",
|
|
29
30
|
"react": "^19.0.0",
|
|
30
31
|
"tsup": "^8.2.0",
|
|
31
|
-
"@blade-flags/core": "0.1.
|
|
32
|
+
"@blade-flags/core": "0.1.2"
|
|
32
33
|
},
|
|
33
34
|
"scripts": {
|
|
34
35
|
"build": "tsup"
|