Product
Introducing License Enforcement in Socket
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
@naturacosmeticos/natds-web
Advanced tools
A collection of components from Natura Design System for React websites and webapps
React Web Lib will be discontinued soon and will no longer receive support and updates. To consult obsolete documentation click here.
NATDS-React is the new React Web Lib for the Natura Design System, see all details here.
React components for web development inside Natura.
// with npm
npm install @naturacosmeticos/natds-web
// with yarn
yarn add @naturacosmeticos/natds-web
This package only works fine with the use of <Provider />
, that is essential for applying styles correctly.
import React from 'react'
import { Button, Provider, buildTheme } from "@naturacosmeticos/natds-web";
const theme = buildTheme('natura', 'light')
export const App = () => (
<Provider theme={theme} cssPrefix="your-css-prefix">
<Button color="primary" variant="contained">
Hello World
</Button>
</Provider>
)
To avoid problems with multiple style fonts, it is necessary to add a
cssPrefix
with theme provider. Please do not try to override theme palette or other tokens. Our Design System themes are ready to use.
Load the Roboto font with 400
and 500
font weights:
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&family=Roboto:wght@400;500&display=swap" rel="stylesheet" />
This package does not provide Roboto font, only its font family names.
Custom fonts are fonts defined by the following brands: avon, aesop, natura and the body shop.
They are applied for all components and to use them you need to load the @font-face into your index.html
and add a third parameter to buildTheme
, called typography
:
Available brands: avon, natura, aesop, theBodyShop
<link href="https://cdn.jsdelivr.net/npm/@naturacosmeticos/natds-themes@latest/dist/assets/[BRAND]_fonts.css" rel="stylesheet" />
Load the font icons from the package @naturacosmeticos/natds-icons
:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@naturacosmeticos/natds-icons@latest/dist/natds-icons.css">
or load it from the node_modules
with a module bundler.
main.js
import React from 'react';
import '@naturacosmeticos/natds-icons/natds-icons.css';
react >= 16.8.4
and react-dom >= 16.8.4
are peer dependencies.If your project does not meet the minimum requirements, you can use @naturacosmeticos/natds-styles.
Installing @naturacosmeticos/natds-web
will also install the following packages:
@material-ui/core
@naturacosmeticos/natds-icons
@naturacosmeticos/natds-styles
Thus, it is not necessary to install them separately to use the Design System.
Having troubles? Please check our Troubleshooting documentation.
For how-to questions and other issues, please use the issues section on our GitHub repo.
Check out our documentation website.
Recently updated? Please read the changelog.
This project is licensed under the terms of ISC License.
FAQs
A collection of components from Natura Design System for React websites and webapps
We found that @naturacosmeticos/natds-web demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 10 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.
Product
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
Product
We're launching a new set of license analysis and compliance features for analyzing, managing, and complying with licenses across a range of supported languages and ecosystems.
Product
We're excited to introduce Socket Optimize, a powerful CLI command to secure open source dependencies with tested, optimized package overrides.