Security News
Input Validation Vulnerabilities Dominate MITRE's 2024 CWE Top 25 List
MITRE's 2024 CWE Top 25 highlights critical software vulnerabilities like XSS, SQL Injection, and CSRF, reflecting shifts due to a refined ranking methodology.
gfw-components
Advanced tools
A React component library for the Global Forest Watch project built with Emotion CSS in JS styled components. All features have support for Server Side Rendering (SSR), the latest two versions of evergreen browsers and IE>=11. All designs for these components are based on the Global Forest Watch UI kit.
The library can be installed in two ways:
Install the package
npm install gfw-components
or with yarn
yarn add gfw-components
import and add the global styles component to the root of your app
import React from "react"
import { GlobalStyles } from 'gfw-components';
export const App = () => (
<>
<GlobalStyles />
<Main />
</>
);
add the font to your html document
<link href="https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500;1,600&display=swap" rel="stylesheet">
then import components and add them to your layout
import React from "react"
import { Header, Footer } from 'gfw-components';
export const MyPage = () => (
<div className="l-page">
<Header />
<div className="content">
<h1>My page</h1>
</div>
<Footer />
</div>
);
If you are using gfw-components
as a npm module there are some external requirments:
react >= 16.8
react-dom >= 16.8
The static build serves as a minimum requirement for the library providing only the global styles, header, footer, and contact us modal such that is can be injected into your site without the need for a react application. The bundle is passed through the same webpack production
environment build to optimize for performance and minimization.
Add the following script tag and font to the head of your app.
<script type="text/javascript" src="https://gfw-assets.s3.amazonaws.com/static/gfw-assets.latest.js" preconnect></script>
<link href="https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500;1,600&display=swap" rel="stylesheet">
And then place inside the html docment tags with the following ids:
<!-- place where you want the header -->
<div id="headerGfw"></div>
<!-- place where you want the footer -->
<div id="footerGfw"></div>
<!-- place at the bottom of your html document -->
<div id="contactGfw"></div>
You can pass props to the <Header />
using the window
window.gfwHeader = {
languages,
afterLangSelect,
customLogo
}
Once you have cloned the repo, install the dependancies and start the styleguide.
yarn && yarn start
If you are using yarn link
to develop with the component directly inside your app you can use the development of the bundle. This comes with source maps to help with debugging.
yarn dev
To deploy a new version of the library follow these steps:
yarn release [major|minor|patch]
yarn deploy
NOTE: for AWS you will need to have the creds present in your .env
file.
The <Header />
comes with a default language dropdown component with built in support for Transifex or your choice of translation method. To use the default language selector make sure you add the Transifex Live snippets to the head of your site. If you are using the static script you must add the Transifex script to translate your site.
FAQs
React component library for the Global Forest Watch project.
The npm package gfw-components receives a total of 20 weekly downloads. As such, gfw-components popularity was classified as not popular.
We found that gfw-components demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
MITRE's 2024 CWE Top 25 highlights critical software vulnerabilities like XSS, SQL Injection, and CSRF, reflecting shifts due to a refined ranking methodology.
Security News
In this segment of the Risky Business podcast, Feross Aboukhadijeh and Patrick Gray discuss the challenges of tracking malware discovered in open source softare.
Research
Security News
A threat actor's playbook for exploiting the npm ecosystem was exposed on the dark web, detailing how to build a blockchain-powered botnet.