Code Monkey home page Code Monkey logo

react-occamy-text's People

Contributors

splact avatar

Stargazers

avatar avatar avatar avatar avatar avatar avatar avatar

Watchers

avatar avatar

Forkers

cedmax trendingtechnology

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.

Edit mzo50l47r8

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

image

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 photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.