search

KyleAMathews / typography.js

A powerful toolkit for building websites with beautiful design
http://kyleamathews.github.io/typography.js/
MIT License
3.83k stars 181 forks source link

Example or how to use Typography React Components in Head #105

Open spherop opened 7 years ago

spherop commented 7 years ago

Having trouble understanding how the react components in your example are being added to the head?

<html>
  <head>
    <TypographyStyle typography={typography} />
    <GoogleFont typography={typography} />
  </head>
  <body>
    // stuff
  </body>
</html>
<body>
<div id="app" />
...

In my app the head is inside an index.html page - not a react component. My React application code is being added to the body a la

  ReactDOM.render(
    <App store={ AppStore } />,
    document.getElementById('app')
  );

Can one add the typography React components in the head via ReactDOM.render?

Any help appreciated.

KyleAMathews commented 7 years ago

The above sample code assumes you're generating your html pages with React.js e.g. Gatsby. If you're not, then you'll need to add the CSS some other way. When you create a typography object, it has a toString method which will generate and print out CSS. <TypographyStyle /> is just wrapping toString.

Ideally you inline the typography css in the <head> of your site but you can also just write it out as a .css file and build it in with the rest of your CSS.

spherop commented 7 years ago

Thanks for the help. I will poke around a little more to see how things can work in the context of my React app. The attraction for me was super simple the drop in option for testing different styles for the site as a whole.

KyleAMathews commented 7 years ago

Oh also if your app is a purely clientside single page app, you can also run typography.injectStyles() upon loading the app. That injects the styles in the head. Just make sure to do this before the initial render of React.

On Mon, Mar 6, 2017 at 11:28 AM Dan Newman notifications@github.com wrote:

Thanks for the help. I will poke around a little more to see how things can work in the context of my React app. The attraction for me was super simple the drop in option for testing different styles for the site as a whole.

— You are receiving this because you commented.

Reply to this email directly, view it on GitHub https://github.com/KyleAMathews/typography.js/issues/105#issuecomment-284504893, or mute the thread https://github.com/notifications/unsubscribe-auth/AAEVh34VN0787d6tO7tcClMixngDTzM4ks5rjF51gaJpZM4MTT05 .

spherop commented 7 years ago

Ok cool - looking forward to trying that... My app is Rails/Webpack/React ...Rails is used at this point only for db/auth and delivering the basic application.html page which react is injected into.