2.59.0 • Published 12 days ago

@naturacosmeticos/natds-react v2.59.0

Weekly downloads
119
License
ISC
Repository
github
Last release
12 days ago

Natura Design System - React

React components for web development inside Natura&Co.

npm package Code coverage GitHub Issues License


Getting started

Requirements

  • Please note that react >= 16.8.4 and react-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.

2.59.0

22 days ago

2.58.2

1 month ago

2.58.1

2 months ago

2.58.0

3 months ago

2.57.0

4 months ago

2.56.0

6 months ago

2.55.0

7 months ago

2.54.0

8 months ago

2.53.0

8 months ago

2.52.0

9 months ago

2.51.0

9 months ago

2.51.1

9 months ago

2.50.0

9 months ago

2.49.0

10 months ago

2.48.0

10 months ago

2.47.0

11 months ago

2.46.1

11 months ago

2.46.0

11 months ago

2.44.0

12 months ago

2.43.0

1 year ago

2.42.0

1 year ago

2.41.1

1 year ago

2.41.0

1 year ago

2.40.2

1 year ago

2.40.1

1 year ago

2.39.1

1 year ago

2.39.2

1 year ago

2.39.0

1 year ago

2.38.0

2 years ago

2.37.0

2 years ago

2.36.0

2 years ago

2.34.2

2 years ago

2.34.1

2 years ago

2.32.3

2 years ago

2.34.2-alpha.0

2 years ago

2.31.0

2 years ago

2.35.1

2 years ago

2.35.3

2 years ago

2.30.0

2 years ago

2.29.0

2 years ago

2.28.0

2 years ago

2.27.0

2 years ago

2.26.0

2 years ago

2.25.0

2 years ago

2.24.1

2 years ago

2.24.0

2 years ago

2.22.0

2 years ago

2.21.0

2 years ago

2.21.2

2 years ago

2.21.1

2 years ago

2.21.3

2 years ago

2.23.0

2 years ago

2.19.6

2 years ago

2.19.4

2 years ago

2.19.2

2 years ago

2.19.3

2 years ago

2.19.0

2 years ago

2.19.1

2 years ago

2.18.0

2 years ago

2.17.0

2 years ago

2.20.0

2 years ago

2.20.1

2 years ago

2.16.3

2 years ago

2.16.4

2 years ago

2.16.1

2 years ago

2.16.2

2 years ago

2.16.0

2 years ago

2.15.0

2 years ago

2.15.1

2 years ago

2.14.1

2 years ago

2.14.0

2 years ago

2.13.6

3 years ago

2.13.7

3 years ago

2.13.4

3 years ago

2.13.5

3 years ago

2.13.2

3 years ago

2.13.3

3 years ago

2.13.1

3 years ago

2.13.0

3 years ago

2.12.3

3 years ago

2.12.2

3 years ago

2.12.0

3 years ago

2.12.1

3 years ago

2.11.2

3 years ago

2.11.1

3 years ago

2.11.0

3 years ago

2.10.0

3 years ago

2.9.2

3 years ago

2.9.1

3 years ago

2.9.0

3 years ago

2.8.0

3 years ago

4.0.2

3 years ago

2.7.0

3 years ago

2.6.0

3 years ago

2.5.1

3 years ago

2.5.0

3 years ago

2.4.1

3 years ago

2.4.0

3 years ago

2.3.0

3 years ago

2.2.0

3 years ago

2.1.1

3 years ago

2.1.0

3 years ago

1.8.3

3 years ago

1.8.2

3 years ago

1.8.1

3 years ago

1.8.0

3 years ago

1.7.1

3 years ago

1.7.0

3 years ago

1.6.0

3 years ago

1.5.5

3 years ago

1.5.4

3 years ago

0.14.0

4 years ago

0.15.0

4 years ago

0.14.1

4 years ago

0.13.0

4 years ago

0.12.1

4 years ago

0.12.0

4 years ago

0.11.0

4 years ago

0.10.3

4 years ago

0.10.2

4 years ago

0.8.7

4 years ago

0.10.0

4 years ago

0.9.1

4 years ago

0.8.6

4 years ago

0.8.5

4 years ago

0.8.1

4 years ago

0.6.2

4 years ago

0.6.1

4 years ago

0.6.0

4 years ago

0.5.0

4 years ago

0.3.4

4 years ago

0.3.2

4 years ago

0.3.3

4 years ago

0.2.3

4 years ago

0.2.2

4 years ago

0.2.1

4 years ago