| format |
string? |
auto |
❌ |
Select which barcode type to use. Please check the wikipage of the different barcode types for more information. |
| width |
number? |
2 |
❌ |
The width option is the width of a single bar. |
| height |
number? |
100 |
❌ |
The height of the barcode. |
| displayValue |
boolean? |
true |
❌ |
|
| text |
string? |
undefined |
❌ |
Overide the text that is diplayed |
| fontOptions |
string? |
"" |
❌ |
With fontOptions you can add bold or italic text to the barcode. |
| font |
string? |
"monospace" |
❌ |
Define the font used for the text in the generated barcode. This can be any default font or a font defined by a @font-face rule. |
| textAlign |
string? |
"center" |
❌ |
Set the horizontal alignment of the text. Can be left / center / right. |
| textPosition |
string? |
"bottom" |
❌ |
Set the vertical position of the text. Can be bottom / top. |
| textMargin |
number? |
2 |
❌ |
Set the vertical position of the text. Can be bottom / top. |
| fontSize |
number? |
20 |
❌ |
Set the size of the text. |
| background |
string? |
"#ffffff" |
❌ |
Set the background of the barcode. |
| lineColor |
string? |
"#000000" |
❌ |
Set the color of the bars and the text. |
| margin |
number? |
10 |
❌ |
Set the space margin around the barcode. If nothing else is set, all side will inherit the margins property but can be replaced if you want to set them separably. |
| marginTop |
number? |
undefined |
❌ |
|
| marginBottom |
number? |
undefined |
❌ |
|
| marginLeft |
number? |
undefined |
❌ |
|
| marginRight |
number? |
undefined |
❌ |
|
| flat |
boolean? |
false |
❌ |
Only for EAN8 / EAN13 |
### Canvas
```js
import React from 'react';
import { useBarcode } from 'react-barcodes';
function App() {
const { inputRef } = useBarcode({
value: 'react-barcodes',
options: {
displayValue: false,
background: '#ffc0cb',
}
});
return ;
};
export default App;
```
### Image
```js
import React from 'react';
import { useBarcode } from 'react-barcodes';
function App() {
const { inputRef } = useBarcode({
value: 'react-barcodes',
options: {
background: '#ffff00',
}
});
return 
## Parameters