Guides
Engineering quickstart
Start building digital products with NewsKit.
Requirements
To use NewsKit components in your project, you’ll need:
Node.js v16 or newer (eg 16.10.0 gives good performance).
A project to install NewsKit into. If you need to create a new one try Next.js or Create React App.
Install the package
1npm install newskit @emotion/react @emotion/styledor
1yarn add newskit @emotion/react @emotion/styledPlease note that newskit is using emotion as styling engine, that is why you also need to install@emotion/react and@emotion/styled.
Set up an app
NewsKit components can be used like any React components. They need to be descendants of a NewsKitProvider which provides a single wrapper to configure your application. It adds a ThemeProvider, MediaQueryProvider, InstrumentationProvider and a LayerOrganizer to handle theming, media queries, instrumentation and stacking context in the application.
Here's the "Hello World!" example of using a NewsKit Tag component with the NewsKitProvider.
1import {NewsKitProvider, Tag, newskitLightTheme} from 'newskit';
2import React from 'react';
3export default class App extends React.Component {
4 render() {
5 return (
6 <NewsKitProvider
7 theme={newskitLightTheme}
8 instrumentation={'instrumentation provider props'}
9 layer={'layer organizer props'}
10 >
11 <Tag
12 href="http://example.com"
13 size="medium">
14 Tag Content
15 </Tag>
16 </NewsKitProvider>
17 )
18 }
19}What’s next?
Theme NewsKit components to match your brand.
Render NewsKit components using an available theme.