react-font-size-by-text-length
Version:
Dynamic font size component for ReactJS
37 lines (36 loc) • 1.95 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.ReactFontSizeByTextLength = void 0;
var react_1 = __importDefault(require("react"));
function ReactFontSizeByTextLength(_a) {
var children = _a.children, _b = _a.maxPercent, maxPercent = _b === void 0 ? 100 : _b, _c = _a.minPercent, minPercent = _c === void 0 ? 0 : _c, changePerChar = _a.changePerChar, _d = _a.startAtChar, startAtChar = _d === void 0 ? 0 : _d, _e = _a.stopAtChar, stopAtChar = _e === void 0 ? Infinity : _e;
var fontSizeInPercent = getNewFontSizeInPercent(maxPercent, minPercent, changePerChar, startAtChar, stopAtChar, Array.isArray(children)
? getNumberOfCharsForMultipleChildren(children)
: getNumberOfCharsForSingleChild(children));
return react_1.default.createElement("span", { style: { fontSize: "".concat(fontSizeInPercent, "%") } }, children);
}
exports.ReactFontSizeByTextLength = ReactFontSizeByTextLength;
var getNumberOfCharsForSingleChild = function (child) {
return child.props.children.length;
};
var getNumberOfCharsForMultipleChildren = function (children) {
var returnable = 0;
children.forEach(function (child) {
if (child.props.children) {
returnable += child.props.children.length;
}
else {
returnable += 1;
}
});
return returnable;
};
var getNewFontSizeInPercent = function (maxPercent, minPercent, changePerChar, startAtChar, stopAtChar, numberOfChars) {
var numberOfCharsAdjusted = Math.min(numberOfChars, stopAtChar);
var numberOfCharToConsiderForCalculation = Math.max(0, numberOfCharsAdjusted - (startAtChar - 1));
var fontSizeInPercent = Math.max(minPercent, maxPercent - changePerChar * numberOfCharToConsiderForCalculation);
return fontSizeInPercent;
};