Skip to content

Commit 4f59616

Browse files
oguzhnatlyoguzhnatly
committed
docs: revamp README, update package metadata, add CI/CD workflows
1 parent 670c0a1 commit 4f59616

File tree

4 files changed

+256
-80
lines changed

4 files changed

+256
-80
lines changed

‎.github/workflows/build.yml‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
name: Build
2+
3+
on:
4+
push:
5+
branches:
6+
- master
7+
pull_request:
8+
branches:
9+
- master
10+
11+
jobs:
12+
build:
13+
name: Install and type check
14+
runs-on: ubuntu-latest
15+
16+
steps:
17+
- name: Checkout
18+
uses: actions/checkout@v4
19+
20+
- name: Setup Node.js
21+
uses: actions/setup-node@v4
22+
with:
23+
node-version: '20'
24+
cache: 'npm'
25+
26+
- name: Install dependencies
27+
run: npm install
28+
29+
- name: Verify types
30+
run: |
31+
test -f index.d.ts || (echo "index.d.ts missing" && exit 1)
32+
echo "Types verified"

‎.github/workflows/publish.yml‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
name: Publish to npm
2+
3+
on:
4+
push:
5+
branches:
6+
- master
7+
paths:
8+
- 'package.json'
9+
10+
jobs:
11+
publish:
12+
name: Publish
13+
runs-on: ubuntu-latest
14+
permissions:
15+
contents: write
16+
id-token: write
17+
18+
steps:
19+
- name: Checkout
20+
uses: actions/checkout@v4
21+
22+
- name: Setup Node.js
23+
uses: actions/setup-node@v4
24+
with:
25+
node-version: '20'
26+
27+
- name: Upgrade npm
28+
run: npm install -g npm@latest
29+
30+
- name: Install dependencies
31+
run: npm install
32+
33+
- name: Check if version changed
34+
id: version_check
35+
run: |
36+
CURRENT_VERSION=$(node -p "require('./package.json').version")
37+
PUBLISHED_VERSION=$(npm view $(node -p "require('./package.json').name") version 2>/dev/null || echo "0.0.0")
38+
echo "current=$CURRENT_VERSION" >> $GITHUB_OUTPUT
39+
echo "published=$PUBLISHED_VERSION" >> $GITHUB_OUTPUT
40+
if [ "$CURRENT_VERSION" != "$PUBLISHED_VERSION" ]; then
41+
echo "changed=true" >> $GITHUB_OUTPUT
42+
else
43+
echo "changed=false" >> $GITHUB_OUTPUT
44+
fi
45+
46+
- name: Publish to npm
47+
if: steps.version_check.outputs.changed == 'true'
48+
run: |
49+
echo "//registry.npmjs.org/:_authToken=${NPM_TOKEN}" > ~/.npmrc
50+
npm publish --provenance --access public
51+
env:
52+
NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
53+
54+
- name: Create GitHub release
55+
if: steps.version_check.outputs.changed == 'true'
56+
uses: softprops/action-gh-release@v2
57+
with:
58+
tag_name: v${{ steps.version_check.outputs.current }}
59+
name: v${{ steps.version_check.outputs.current }}
60+
body: |
61+
## @oguzhnatly/react-native-custom-qr-codes v${{ steps.version_check.outputs.current }}
62+
63+
Published to npm: https://www.npmjs.com/package/@oguzhnatly/react-native-custom-qr-codes
64+
generate_release_notes: true
65+
make_latest: true
66+
67+
- name: Skip (version unchanged)
68+
if: steps.version_check.outputs.changed == 'false'
69+
run: echo "Version ${{ steps.version_check.outputs.current }} is already published. Bump package.json version to trigger a new release."

‎README.md‎

Lines changed: 148 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -1,105 +1,181 @@
1+
# 🔲 react-native-custom-qr-codes
12

2-
# react-native-custom-qr-codes
3+
Fully customizable QR code component for React Native with TypeScript support and RTL layout compatibility. Style the code pieces, eye shapes, colors, gradients, logos, and background images however you need.
34

4-
<p align="center">
5-
<img alt="example-qr-code-1" src="https://raw.githubusercontent.com/nating/react-native-custom-qr-codes/HEAD/assets/qr-code-1.png" width="250">
6-
<img alt="example-qr-code-1" src="https://raw.githubusercontent.com/nating/react-native-custom-qr-codes/HEAD/assets/qr-code-2.png" width="250">
7-
<img alt="example-qr-code-3" src="https://raw.githubusercontent.com/nating/react-native-custom-qr-codes/HEAD/assets/qr-code-3.png" width="250">
8-
</p>
9-
10-
<p align="center">
11-
</p>
5+
[![npm version](https://img.shields.io/npm/v/@oguzhnatly/react-native-custom-qr-codes.svg)](https://www.npmjs.com/package/@oguzhnatly/react-native-custom-qr-codes)
6+
[![npm downloads](https://img.shields.io/npm/dw/@oguzhnatly/react-native-custom-qr-codes.svg)](https://www.npmjs.com/package/@oguzhnatly/react-native-custom-qr-codes)
7+
[![license](https://img.shields.io/badge/license-MIT-blue.svg)](LICENSE)
8+
[![platforms](https://img.shields.io/badge/platform-iOS%20%7C%20Android-lightgrey.svg)](https://github.com/oguzhnatly/react-native-custom-qr-codes)
129

1310
<p align="center">
14-
Customisable QR Codes for React Native.
11+
<img alt="QR Code Example 1" src="https://raw.githubusercontent.com/oguzhnatly/react-native-custom-qr-codes/master/assets/qr-code-1.png" width="200">
12+
<img alt="QR Code Example 2" src="https://raw.githubusercontent.com/oguzhnatly/react-native-custom-qr-codes/master/assets/qr-code-2.png" width="200">
13+
<img alt="QR Code Example 3" src="https://raw.githubusercontent.com/oguzhnatly/react-native-custom-qr-codes/master/assets/qr-code-3.png" width="200">
1514
</p>
1615

16+
---
17+
18+
## Features
19+
20+
- ✅ Full TypeScript support with typed props
21+
- ✅ RTL layout support
22+
- ✅ Multiple code piece styles: square, circle, dot, diamond, sharp, ninja
23+
- ✅ Independent eye shape control (outer and inner separately)
24+
- ✅ Linear gradient foreground colors
25+
- ✅ Logo overlay in the center of the QR code
26+
- ✅ Background image fill for code pieces
27+
- ✅ Configurable error correction level
28+
- ✅ iOS and Android
29+
30+
---
31+
1732
## Installation
1833

19-
`npm install react-native-custom-qr-codes`
34+
```sh
35+
npm install @oguzhnatly/react-native-custom-qr-codes
36+
```
37+
38+
```sh
39+
yarn add @oguzhnatly/react-native-custom-qr-codes
40+
```
2041

21-
If you are not using Expo, you will also have to manually link the [react-native-svg library](https://github.com/react-native-community/react-native-svg).
22-
Follow [the instructions here](https://github.com/react-native-community/react-native-svg#manual) to do this.
42+
This package depends on `react-native-svg`. If you are not using Expo, install and link it manually:
2343

24-
## Usage
44+
```sh
45+
npm install react-native-svg
46+
cd ios && pod install
47+
```
48+
49+
For manual linking instructions see the [react-native-svg documentation](https://github.com/software-mansion/react-native-svg#installation).
50+
51+
---
2552

53+
## Usage
2654

27-
```jsx
28-
import { QRCode } from 'react-native-custom-qr-codes';
55+
```tsx
56+
import { QRCode } from '@oguzhnatly/react-native-custom-qr-codes';
2957

30-
<QRCode content='https://reactnative.com'/>
58+
<QRCode content="https://github.com/oguzhnatly" />
3159
```
3260

33-
### Properties
34-
35-
| Prop | Description | Default |
36-
|---|---|---|
37-
|**`content`**|The String to be encoded in the QR code. |`'No Content'`|
38-
|**`codeStyle`**|The style of the centre QR Code pieces. |`square`|
39-
|**`outerEyeStyle`**|The style of the outside of the QR Code's eyes. |`square`|
40-
|**`innerEyeStyle`**|The style of the inside of the QR Code's eyes. |`square`|
41-
|**`size`**|The width & height of the component. |`250`|
42-
|**`color`**|The color of the QR Code. |`black`|
43-
|**`backgroundColor`**|The background color of the component. |`white`|
44-
|**`padding`**|The padding between the edge of the component and the QR Code itself (In terms of QR code piece sizes). |`1`|
45-
|**`logo`**|The image to be put in the centre of the QR Code.<br>**Must use a higher `ecl` for QR Code to work with a logo. <br>(L->M->Q->H)** |none|
46-
|**`logoSize`**|The size of the logo in the QR Code. |none|
47-
|**`linearGradient`**|The two colors to be used for the linear gradient for the foreground. |none|
48-
|**`gradientDirection`**|The numbers that [define the orientation of the linear gradient](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Gradients). |`[0,0,170,0]`|
49-
|**`backgroundImage`**|The image to be used as the filling of the QR Code pieces.<br>**The Eyes can not be styled if a background image is used.**|none|
50-
|**`ecl`**|The [error correction level](http://www.qrcode.com/en/about/error_correction.html) of the QR Code. |`L`|
61+
---
62+
63+
## Props
64+
65+
| Prop | Type | Default | Description |
66+
|---|---|---|---|
67+
| `content` | `string` | `'No Content'` | The string to encode in the QR code |
68+
| `size` | `number` | `250` | Width and height of the component in pixels |
69+
| `padding` | `number` | `1` | Padding between the edge and the QR code in piece units |
70+
| `color` | `string` | `'black'` | Foreground color of the QR code |
71+
| `backgroundColor` | `string` | `'white'` | Background color of the component |
72+
| `codeStyle` | `string` | `'square'` | Style of the centre QR code pieces. See values below |
73+
| `outerEyeStyle` | `string` | `'square'` | Style of the outer frame of the QR code eyes |
74+
| `innerEyeStyle` | `string` | `'square'` | Style of the inner dot of the QR code eyes |
75+
| `ecl` | `string` | `'L'` | Error correction level. Higher levels allow logo overlays. `L` `M` `Q` `H` |
76+
| `logo` | `ImageSource` | none | Image source to display in the center of the QR code. Requires a higher `ecl` |
77+
| `logoSize` | `number` | none | Size of the logo overlay in pixels |
78+
| `linearGradient` | `ColorValue[]` | none | Two colors used for a linear gradient on the foreground |
79+
| `gradientDirection` | `number[]` | `[0,0,170,0]` | Numbers defining the [gradient orientation](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Gradients) |
80+
| `backgroundImage` | `ImageSource` | none | Image used as the fill pattern for QR code pieces. Eye styling is disabled when this is used |
81+
| `isRTL` | `boolean` | `false` | Enables right-to-left layout rendering |
82+
83+
### `codeStyle` values
84+
85+
`square` `circle` `dot` `diamond` `sharp` `ninja`
86+
87+
### `outerEyeStyle` values
88+
89+
`square` `circle` `circles` `diamond` `rounded`
90+
91+
### `innerEyeStyle` values
92+
93+
`square` `circle` `circles` `diamond` `rounded`
94+
95+
---
5196

5297
## Examples
5398

54-
### `codeStyle`
55-
```jsx
56-
<QRCode codeStyle='square' />
57-
<QRCode codeStyle='circle' />
58-
<QRCode codeStyle='dot' />
59-
<QRCode codeStyle='diamond' />
60-
<QRCode codeStyle='sharp' />
61-
```
62-
<img src='./assets/example-code-styles.png' height='250'/>
99+
### Code styles
63100

64-
### `outerEyeStyle`
65-
```jsx
66-
<QRCode outerEyeStyle='square' />
67-
<QRCode outerEyeStyle='circle' />
68-
<QRCode outerEyeStyle='diamond' />
101+
```tsx
102+
<QRCode content="https://example.com" codeStyle="square" />
103+
<QRCode content="https://example.com" codeStyle="circle" />
104+
<QRCode content="https://example.com" codeStyle="dot" />
105+
<QRCode content="https://example.com" codeStyle="diamond" />
106+
<QRCode content="https://example.com" codeStyle="sharp" />
69107
```
70-
<img src='./assets/example-outer-eye-styles.png' height='250'/>
71108

72-
### `innerEyeStyle`
73-
```jsx
74-
<QRCode innerEyeStyle='square' />
75-
<QRCode innerEyeStyle='circle' />
76-
<QRCode innerEyeStyle='diamond' />
109+
<img src="./assets/example-code-styles.png" height="220" />
110+
111+
### Eye styles
112+
113+
```tsx
114+
<QRCode content="https://example.com" outerEyeStyle="square" innerEyeStyle="square" />
115+
<QRCode content="https://example.com" outerEyeStyle="circle" innerEyeStyle="circle" />
116+
<QRCode content="https://example.com" outerEyeStyle="diamond" innerEyeStyle="diamond" />
77117
```
78-
<img src='./assets/example-inner-eye-styles.png' height='250'/>
79118

80-
### logo
81-
```jsx
82-
<QRCode logo={require('./dab.png')} />
119+
<img src="./assets/example-outer-eye-styles.png" height="220" />
120+
<img src="./assets/example-inner-eye-styles.png" height="220" />
121+
122+
### Logo overlay
123+
124+
Use `ecl="H"` to ensure the QR code remains scannable with a logo covering the center:
125+
126+
```tsx
127+
<QRCode
128+
content="https://example.com"
129+
logo={require('./logo.png')}
130+
logoSize={60}
131+
ecl="H"
132+
/>
83133
```
84-
<img src='./assets/example-logo.png' height='250'/>
85134

86-
### linearGradient
87-
```jsx
88-
<QRCode linearGradient={['rgb(255,0,0)','rgb(0,255,255)']} />
89-
<QRCode linearGradient={['rgb(255,0,0)','rgb(0,255,255)']} gradientDirection={[0,170,0,0]} />
135+
<img src="./assets/example-logo.png" height="220" />
136+
137+
### Linear gradient
138+
139+
```tsx
140+
<QRCode
141+
content="https://example.com"
142+
linearGradient={['rgb(255,0,0)', 'rgb(0,100,255)']}
143+
/>
144+
145+
<QRCode
146+
content="https://example.com"
147+
linearGradient={['rgb(255,0,0)', 'rgb(0,100,255)']}
148+
gradientDirection={[0, 170, 0, 0]}
149+
/>
90150
```
91-
<img src='./assets/example-linear-gradient.png' height='250'/>
92151

93-
### backgroundImage
94-
```jsx
95-
<QRCode backgroundImage={require('./galaxy.png')} />
152+
<img src="./assets/example-linear-gradient.png" height="220" />
153+
154+
### Background image
155+
156+
Eye styling is not available when using `backgroundImage`:
157+
158+
```tsx
159+
<QRCode
160+
content="https://example.com"
161+
backgroundImage={require('./texture.png')}
162+
ecl="H"
163+
/>
96164
```
97-
<img src='./assets/example-background-image.png' height='250'/>
98165

99-
## Contributing
166+
<img src="./assets/example-background-image.png" height="220" />
167+
168+
### RTL support
169+
170+
```tsx
171+
<QRCode
172+
content="https://example.com"
173+
isRTL={true}
174+
/>
175+
```
100176

101-
Take a look at [CONTRIBUTING.md](./CONTRIBUTING.md) 😁
177+
---
102178

103179
## License
104180

105-
[MIT License](http://opensource.org/licenses/mit-license.html). © Geoffrey Natin 2017
181+
MIT © [Oguzhan Atalay](https://github.com/oguzhnatly)

‎package.json‎

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
{
2-
"name": "react-native-custom-qr-codes",
2+
"name": "@oguzhnatly/react-native-custom-qr-codes",
33
"version": "2.0.0",
44
"main": "index.js",
5-
"description": "A customisable QR code component for React Native applications.",
5+
"description": "Customizable QR codes for React Native with TypeScript and RTL support",
66
"keywords": [
77
"react-native",
88
"react-native-component",
@@ -14,17 +14,16 @@
1414
"custom-qr-code"
1515
],
1616
"author": {
17-
"name": "Geoffrey Natin",
18-
"email": "nating@tcd.ie",
19-
"url": "https://github.com/nating"
17+
"name": "Oguzhan Atalay",
18+
"url": "https://github.com/oguzhnatly"
2019
},
21-
"homepage": "https://github.com/nating/react-native-custom-qr-codes",
20+
"homepage": "https://github.com/oguzhnatly/react-native-custom-qr-codes",
2221
"repository": {
2322
"type": "git",
24-
"url": "git://github.com/nating/react-native-custom-qr-codes.git"
23+
"url": "https://github.com/oguzhnatly/react-native-custom-qr-codes"
2524
},
2625
"bugs": {
27-
"url": "https://github.com/nating/react-native-custom-qr-codes/issues"
26+
"url": "https://github.com/oguzhnatly/react-native-custom-qr-codes/issues"
2827
},
2928
"license": "MIT",
3029
"dependencies": {

0 commit comments

Comments
 (0)