JS-CardEditor is a React component used to create/edit card printing templates. It works with node.js and web browsers (once packaged with webpack).
Related projects:
- js-cardrendering: the card rendering engine used by this project
- card-printing-worker: a node server providing REST API for bitmap generation/printing
- leosac-credential-provisioning: a complete professional card provisioning solution for both card encoding and printing
You need React >= 18
npm install @leosac/js-cardeditor --save
import { CardDesigner } from "@leosac/js-cardeditor";
/* Import bootstrap css if missing */
import "bootstrap/dist/css/bootstrap.min.css";
const App = () => (
<CardDesigner enableDownload="true" enablePrint="true" />
);
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);
git clone https://github.com/leosac/js-cardeditor.git
cd "js-cardeditor"
npm install
npm run build
npm start
npm run test
Several parameters can be optionally passed to the component.
- content [`Object`]: Card Template
- draggableFields [`Array`] (`{name : String, default_value: String}`): List of draggable fields
- formatVersion [`String`] (`Default: Undefined`): Force a specific format version for the output (default to latest version)
- enabledCardSizes [`Object` : Select cards templates you want to authorize. (more informations inside "Card Templates" section)
- enableDownload [`Boolean`] (`Default: false`): Enable/Disable Download features
- enableName [`Boolean`] (`Default:true`): Enable/Disable Name input
- maxNameLength [`Number`]: Set name max length
- enablePrint [`Boolean`] (`Default:false`): Enable/Disable Printing features
- enableUnprintable [`Boolean`] (`Default:false`): Active unprintable objects, like fingerprint
- onEdit [`Function`] (`Param 1: Snapshot): Function called at each template changed / field edition (created, removed, resized, moved...)
- onSubmit [`Function`] (): Enable the Submit button and trigger this function on submition
Parameter enabledCardSizes
enable/disable templates size.
To customize the allowed size list, create an Object
like:
enabledCardSizes: {
cr80: true,
res_4to3: false,
res_3to2 : false,
res_16to9 : true,
custom: false
}
Current list of supported sizes:
cr80
: Standard card sizeres_4to3
: 4/3 visualres_3to2
: 3/2 visualres_8to5
: 8/5 visualres_5to3
: 5/3 visualres_16to9
: 16/9 visualcustom
: Allow custom size
The function can take a card template in parameter content
, useful if you want to edit a card directly after loading.
It is recommended to use JSON format.
XML import and export is supported as well for compatibility reasons (.dpf files).
Jquery is being used for some specific aspects of this component. This is not a best practice as it may conflict with React DOM management. Ideally, it will be further removed on a later version.
This project has been created by Leosac SAS. The source code of this library is released under LGPLv3 license.