Stoke Toolbelt
This is a collection of React components we use at Stoke Studio for creating websites.
Install
yarn add stoke-toolbeltDependencies:
yarn add lodash prop-types react react-ga react-router-domComponents
NotFound
See Rendering Routes with Statuses. For use with react-router.
Props: Same props as Route
<Switch>
<Route path="/page1" component={Page1} />
<Route path="/page2" component={Page2} />
<Route path="/page3" component={Page3} />
<NotFound component={NotFoundPage} />
</Switch>PermanentRedirect
For use with react-router. Forwards search query to new path.
Props: Same props as Route
<Switch>
<Route path="/page1" component={Page1} />
<Route path="/page2" component={Page2} />
<Route path="/page3" component={Page3} />
<PermanentRedirect exact from="/about-us" to="/about" />
</Switch>RetinaImage
Props:
-
srcs: array of source paths in increasing densities [1x, 2x, 3x] -
naturalWidth: the width image should actually be (width of 1x image) -
alt: accessible alt text
<RetinaImage
srcs={[
'/images/my-image.jpg',
'/images/my-image@2x.jpg',
'/images/my-image@3x.jpg'
]}
naturalWidth={500}
alt="My Image"
/>ScrollToTop
For use with react-router. Scroll to top of page on route changes.
<ScrollToTop>
<App />
</ScrollToTop>TrackPageViews
Props:
-
trackingId: Google Analytics Tracking ID (ex.UA-12345678-1)- Supports multiple Tracking IDs:
[{ trackingId: 'UA-1' }, { trackingId: 'UA-2', gaOptions: { name: 'second' }}]- At least one tracker must be named
- Pageviews are tracked via all trackers (regardless of name)
- Supports multiple Tracking IDs:
-
onInit: Function ran afterreact-gais initialized.ReactGAis passed as only parameter. Only runs in browser—never on server.
const App = () => (
<TrackPageViews trackingId="UA-12345678-1">
<Layout>
<Switch>
<Route exact path="/" component={Home} />
</Switch>
</Layout>
</TrackPageViews>
);WindowSize
Props:
-
render: passed object of{ width }where width is current width of window- Note:
widthvalue calculation is throttled
- Note:
<WindowSize
render={({ width }) => (
<div style={{ width: width * 0.5 }}>
This is always fixed at half of window width.
</div>
)}
/>Rendering Routes with Statuses
Express example:
const context = {};
const markup = renderToString(
<StaticRouter context={context} location={req.url}>
<App />
</StaticRouter>
);
if (context.url) {
res.redirect(context.status || 302, context.url);
} else {
res.status(context.status || 200).send(`<html>...</html>`);
}
