@naturacosmeticos/natds-react v2.59.0
Natura Design System - React
React components for web development inside Natura&Co.
Getting started
Requirements
- Please note that
react >= 16.8.4
andreact-dom >= 16.8.4
are peer dependencies. - We recommend
node >= 8.0.0
- If your project uses TypeScript, we need
TypeScript >=2.1
;
Installation
$ npm install @naturacosmeticos/natds-web
OR
$ yarn add @naturacosmeticos/natds-web
Fonts
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.
Icons
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 like webpack
or rollup
main.js
import React from "react";
import "@naturacosmeticos/natds-icons/natds-icons.css";
webpack.config.js
module.exports = {
module: {
loaders: [
{ test: /\.css$/, loader: "style-loader!css-loader" },
// ...
],
},
};
Usage
Here is a quick example to get you started:
Note that we enclose all your application in a Provider
component.
import React from "react";
import {
Button,
CssBaseline,
Provider,
themes,
} from "@naturacosmeticos/natds-web";
export const App = () => (
<Provider theme={themes.natura.light} cssPrefix="YourCssPrefixHere">
<CssBaseline />
<Button color="primary" variant="contained">
Hello World
</Button>
</Provider>
);
This package only works fine with the use of <Provider />
, that is essential for applying styles correctly. And to avoid problems with multiple style fonts, it is necessary to add a cssPrefix
with theme provider (the default is natds
).
Please do not try to override theme palette or another tokens. Our Design System themes are ready to use.
Additional information
Bundled in this package
Installing @naturacosmeticos/natds-react
will also install the following packages:
@naturacosmeticos/natds-icons
@naturacosmeticos/natds-styles
Thus, it is not necessary to install them separately to use the Design System.
Using a CDN
⚠️ This feature is experimental.
We provide a Universal Module Definition (UMD) file via jsdelivr
:
https://cdn.jsdelivr.net/npm/@naturacosmeticos/natds-web
<script
crossorigin="anonymous"
src="https://cdn.jsdelivr.net/npm/@naturacosmeticos/natds-web"
></script>
For more info and examples, check our CDN documentation.
Troubleshooting
Having troubles? Please check our Troubleshooting documentation.
Questions
For how-to questions and other issues, please use the issues section on our GitHub repo.
Documentation
Check out our documentation website.
Changelog
Recently updated? Please read the changelog.
License
This project is licensed under the terms of ISC License.
12 days ago
12 days ago
12 days ago
13 days ago
22 days ago
22 days ago
1 month ago
1 month ago
2 months ago
2 months ago
3 months ago
3 months ago
4 months ago
4 months ago
5 months ago
5 months ago
6 months ago
8 months ago
8 months ago
6 months ago
6 months ago
8 months ago
9 months ago
9 months ago
10 months ago
9 months ago
7 months ago
6 months ago
8 months ago
10 months ago
8 months ago
9 months ago
10 months ago
8 months ago
6 months ago
8 months ago
9 months ago
10 months ago
9 months ago
9 months ago
6 months ago
9 months ago
10 months ago
10 months ago
10 months ago
10 months ago
6 months ago
10 months ago
6 months ago
11 months ago
8 months ago
7 months ago
10 months ago
6 months ago
9 months ago
10 months ago
8 months ago
9 months ago
8 months ago
11 months ago
11 months ago
9 months ago
11 months ago
11 months ago
11 months ago
12 months ago
1 year ago
1 year ago
11 months ago
11 months ago
11 months ago
12 months ago
11 months ago
12 months ago
12 months ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago