score:0
Accepted answer
(this is not an answer, it's just a cleaned-up method, because it was driving me nuts.)
scaledname() {
const { name } = this.state;
if (!name) {
return null;
}
if (name.length <= 11) {
return (
<div classname="name-preview">{name}</div>
);
}
const fontscale = 214 - name.length;
return (
<div classname="name-preview" style={{ fontsize: `${fontscale}%` }}>
{name}
</div>
);
}
i'd actually probably move this into a slightly-smarter-but-light component. this is completely untested, but gives a rough idea:
import { isempty } from 'lodash'; // or whatever.
const scaledname = ({ value, startingscale=203, scaleatlength=11, scalefactor=1 }) => {
if (isempty(value)) {
return null;
}
const styles = {};
if (value.length > scaleatlength) {
const scaledelta = (value.length - scaleatlength) * scalefactor;
const fontscale = startingscale - scaledelta;
styles.fontsize = `${fontscale}%`;
}
return (
<div classname="name-preview" style={styles}>
{value}
</div>
);
};
Source: stackoverflow.com
Related Query
- Text disappears after reaching the required length
- How to limit the text filed length with input type number in React JS and prevent entry of E,e, -, + etc
- How to get the length of the text inside the React component
- Data disappears in the react-hooks page, after iterating and setting to the state
- React-Redux data not reaching console after refreshing the browser
- How can I make the text area empty after I click the submit button?
- Material UI Autocomplete - How do I add the same icon + text to the Textfield after I have selected
- React rendering the component twice and 2nd disappears after a flash, [DOM] found 2 elements with non-unique id
- How to I remove the text inside a Text Area after submit React JS
- How to get the text to be in alignment after a line break in react js
- Reactjs Form Validations-for input type number the text field in constantly showing single value even after giving backspace from the keyboard
- How to clear input text box, after obtaining the result from API in React
- How can I fix the problem of replacing button text with loading spinner after click?
- get the value from a text input after it is updated in react function
- How do I make the text from an input field appear on the screen after it is submitted?
- How to solve the issue of a text cursor in a text input being automatically placed at the end of the input after a typed character has been inserted?
- Return the correct length of a object in React's state after filtering it
- React hooks form doesn't reset the text fields even after submitting the data
- How to test the child component render text after the button on the parent component click with react testing library?
- I'm using MUI-Data-Tables and I would like to change the header text color after I click to sort the Column?
- The x-axis line disappears after drawing a linear plot
- How to add different text after the map function has rendered 3 times?
- How to hide the input text after 5 milliseconds in React?
- Text breaks after using the function. Not able to translate the text
- React: Updating state, mapping over state to display a list but the list disappears from the view after a second?
- I am trying to get the length of the text added and getting the error as Uncaught TypeError
- Scroll to the top of the page after render in react.js
- In React ES6, why does the input field lose focus after typing a character?
- The prop `history` is marked as required in `Router`, but its value is `undefined`. in Router
- ReferenceError: You are trying to `import` a file after the Jest environment has been torn down
More Query from same tag
- How can I manage a list from Parent component in React and render it?
- Trying to add style on react toastify
- How to get the index of the barchart label that has been clicked with react-chart js-2?
- Toggle Switch unable to maintain the set value when onClicked
- React hook inside promise not even triggered! not log anything?
- How to display an input box on selection of options value?
- react class method is not defined no-undef
- This.state property is considered "undefined"
- Clicking like icons increases the like count of other components
- how to have 2 different events for a single row in react-table
- How to return data with swr in react?
- Why react wai-aria is not in camelCase?
- Material UI (Scrollspy) - React - use tabs to move through list and auto scroll to index
- How to prefetch video in a react application?
- Why reading attributes of an object makes the object undefine?
- How to use browser back/forward buttons to navigate React state change history
- How to create route in Electron + React App
- Next Js showing index of build folder when using serve
- When Reactjs has functional component as parent and child component as class
- How to get the path from Route?
- useLocation hook keeps states even on hard refresh
- How to keep refreshing tokens using refresh token in React
- How do I organise 5 items evenly in a row with material-ui's grid system?
- Change Icon from FontAwesomeIcon on Function (onChange Text Input)
- useLazyQuery results into "Too many re-renders"
- sending email notification in react and database saved in firebase
- Javascript 30 course in react
- React.js: attach event from parent to children
- I already have a switch case statement in my reducer. How do I add an extra if condition in reducer?
- Background Image not being displayed