react-occamy-text's People
react-occamy-text's Issues
lib folder missing when installed from npm
This lib looks awesome, but I can't get it running.
$ npm install --save react-occamy-text
$ cat node_modules/react-occamy-text/package.json | grep main
"main": "lib/OccamyText.js",
$ cat node_modules/react-occamy-text/lib/OccamyText.js
cat: node_modules/react-occamy-text/lib/OccamyText.js: No such file or directory
Package.json indicates that it should use lib/OccamyText.js
as the entrypoint into the module, but that file doesn't exist.
I tried building it locally, but that failed:
$ cd node_modules/react-occamy-text && npm install && npm run build
> [email protected] build /Users/atcodes/.../node_modules/react-occamy-text
> gulp clean && NODE_ENV=production gulp build
/Users/atcodes/.../node_modules/react-occamy-text/node_modules/require-dir/index.js:93
if (!require.extensions.hasOwnProperty(ext)) {
^
TypeError: require.extensions.hasOwnProperty is not a function
at requireDir (/Users/atcodes/.../node_modules/react-occamy-text/node_modules/require-dir/index.js:93:37)
at Object.<anonymous> (/Users/atcodes/.../node_modules/react-occamy-text/node_modules/gulp-git/index.js:4:18)
at Module._compile (module.js:652:30)
at Object.Module._extensions..js (module.js:663:10)
at Module.load (module.js:565:32)
at tryModuleLoad (module.js:505:12)
at Function.Module._load (module.js:497:3)
at Module.require (module.js:596:17)
at require (internal/module.js:11:18)
at Object.<anonymous> (/Users/atcodes/.../node_modules/react-occamy-text/node_modules/react-component-gulp-tasks/tasks/release.js:1:73)
Node & NPM versions:
$ node -v && npm -v
v8.11.3
6.4.0
Parent Width Overflow
Thank you for this awesome package!
Just wanted to let you know of these behaviours I encountered while using it.
- Shorter strings overflow the parent width
- Strings with no spaces overflow the parent width
Is this expected behaviour? Is there a way to correct it?
I made a Codesandbox to showcase the issues.
re-render doesn't seem to resize correctly
Works great if the text is in place already for the initial render, but if a delayed effect (like loading some data over ajax, and then changing a label from "loading" to the final value) causes it to re-render, then it overflows:
https://codesandbox.io/s/2v0079xjjy
import React from "react";
import { useEffect, useState } from "react";
import ReactDOM from "react-dom";
import OccamyText from "react-occamy-text";
import "./styles.css";
const WAIT_SECONDS = 2;
function App() {
const [timer, setTimer] = useState(null);
const [label, setLabel] = useState("loading...");
useEffect(() => {
if (timer !== null) {
return;
}
setTimer(
setTimeout(() => {
setLabel("Enough text to make it wrap in normal circumstances");
}, WAIT_SECONDS * 1000)
);
return () => {
clearTimeout(timer);
};
}, [timer]);
return (
<div className="App">
<h1>no render issues, because it doesn't re-render:</h1>
<div
style={{
marginBottom: "10px",
width: "350px",
height: "35px",
backgroundColor: "#0ee"
}}
>
<OccamyText>
Enough text to make it wrap in normal circumstances
</OccamyText>
</div>
<h1>re-render after delayed effect causes layout issues:</h1>
<div
style={{
marginBottom: "10px",
width: "350px",
height: "35px",
backgroundColor: "#0ee"
}}
>
<OccamyText>{label}</OccamyText>
</div>
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. ๐๐๐
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google โค๏ธ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.