@qr-x/react-native
v1.1.1
Published
Create elegant QR codes
Downloads
34
Readme
Installation
npm install @qr-x/react-native
Usage
You can also try QR-X in action here or follow the examples below.
Solid
import QRX from '@qr-x/react-native'
function App() {
return <QRX data='https://qr-x.devtrice.dev' width={400} height={400} color='#0284c7' />
}
Gradient
Linear Gradient
import QRX from '@qr-x/react-native'
function App() {
return (
<QRX data='https://qr-x.devtrice.dev' width={400} height={400} gradient={{ colors: ['#f97316', '#f59e0b', '#facc15'] }} />
)
}
Radial Gradient
import QRX from '@qr-x/react-native'
function App() {
return (
<QRX
data='https://qr-x.devtrice.dev'
width={400}
height={400}
gradient={{ type: 'radial', colors: ['#f97316', '#f59e0b', '#facc15'] }}
/>
)
}
Fill Image
import QRX from '@qr-x/react-native'
function App() {
return (
<QRX
data='https://qr-x.devtrice.dev'
width={400}
height={400}
fillImage='https://images.unsplash.com/photo-1682687218608-5e2522b04673'
/>
)
}
Brand
Brand Image
import QRX from '@qr-x/react-native'
function App() {
return (
<QRX
data='https://qr-x.devtrice.dev'
width={400}
height={400}
brand={{
src: 'https://images.unsplash.com/photo-1682687218608-5e2522b04673',
style: { width: 32, height: 32 },
}}
/>
)
}
Brand Component
import QRX from '@qr-x/react-native'
function App() {
return (
<QRX
data='https://qr-x.devtrice.dev'
width={400}
height={400}
brand={<View style={{ width: 50, height: 50, background: 'red' }} />}
/>
)
}
Props
| Name | Type | Default |
| :--------------- | :--------------------------------------------------------------- | :--------- |
| data | string
| |
| level | 'L' \| 'M' \|'Q' \| 'H'
| 'L'
|
| shapes.body | 'square' \| 'circle' \| 'leaf' \| 'rounded'
| 'square'
|
| shapes.eyeball | 'square' \| 'circle' \| 'leaf' \| 'rounded'
| 'square'
|
| shapes.eyeframe | 'square' \| 'circle' \| 'leaf' \| 'rounded'
| 'square'
|
| gradient.type | 'linear' \| 'radial'
| |
| gradients.colors | string[] \| {value: string, stop: number}
| |
| gradients.rotate | number
(This property only exist if gradient.type is 'radial') | 45
|
| fillImage | string
| |
| brand | ComponentProps<'img'>
| ReactNode
| |