import React from 'react';
import ReactDOM from 'react-dom';
import ReactFontSizeByTextLength from 'react-font-size-by-text-length';

function App() {
    const textArray = ["hello", "world"]
  return (
    <>
      // ---- Example One -----
      
      <ReactFontSizeByTextLength changePerChar={10}>
        <span>This text will be smaller</span>
      </ReactFontSizeByTextLength>
      
      <ReactFontSizeByTextLength changePerChar={10}>
        <span>Than this text</span>
      </ReactFontSizeByTextLength>

      // ---- Example Two -----
      
      <ReactFontSizeByTextLength changePerChar={5} startAtChar={2}>
        <span>
          This works 
          <i class="fas fa-check-circle"></i>
        </span>
      </ReactFontSizeByTextLength>


        // ---- Example Three -----

        <ReactFontSizeByTextLength changePerChar={3} minPercent={50}>
            {
                textArray.map((text) =>
                    <span>{text}</span>
            )}
        </ReactFontSizeByTextLength>
    </>
  );
}

ReactDOM.render(<App />, document.getElementById("root"));