Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/zendeskgarden/react-containers
:seedling: garden React (no-UI) containers
https://github.com/zendeskgarden/react-containers
Last synced: 5 days ago
JSON representation
:seedling: garden React (no-UI) containers
- Host: GitHub
- URL: https://github.com/zendeskgarden/react-containers
- Owner: zendeskgarden
- License: apache-2.0
- Created: 2018-11-21T05:08:25.000Z (almost 6 years ago)
- Default Branch: main
- Last Pushed: 2024-09-25T23:16:01.000Z (about 2 months ago)
- Last Synced: 2024-11-03T16:39:59.636Z (10 days ago)
- Language: TypeScript
- Homepage: https://zendeskgarden.github.io/react-containers/
- Size: 70.7 MB
- Stars: 286
- Watchers: 36
- Forks: 15
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Contributing: .github/CONTRIBUTING.md
- License: LICENSE.md
- Code of conduct: .github/CODE_OF_CONDUCT.md
- Codeowners: .github/CODEOWNERS
Awesome Lists containing this project
- awesome-list - react-containers - UI) containers | zendeskgarden | 228 | (TypeScript)
- jimsghstars - zendeskgarden/react-containers - :seedling: garden React (no-UI) containers (TypeScript)
README
# Garden React Containers [![Build Status][build status badge]][build status link] [![Dependency Status][dependency status badge]][dependency status link] [![Coverage Status][coverage status badge]][coverage status link]
[build status badge]: https://flat.badgen.net/circleci/github/zendeskgarden/react-containers/main?label=build
[build status link]: https://circleci.com/gh/zendeskgarden/react-containers/tree/main
[dependency status badge]: https://flat.badgen.net/david/dev/zendeskgarden/react-containers?label=dependencies
[dependency status link]: https://david-dm.org/zendeskgarden/react-containers?type=dev
[coverage status badge]: https://flat.badgen.net/coveralls/c/github/zendeskgarden/react-containers/main
[coverage status link]: https://coveralls.io/github/zendeskgarden/react-containers
> :seedling: Garden is the design system by Zendesk
Garden Containers provide an accessible foundation to start from in your journey to building a11y,
keyboard navigable and RTL aware components.
## Installation
See the individual package README for the React container you would like
to install.
| Package | Version | Size |
| ------------------------------------------------------------------ | ------------------------------------------------------------------- | -------------------------------------------------------------------- |
| [`@zendeskgarden/container-accordion`](packages/accordion) | [![npm version][accordion npm version]][accordion npm link] | [![npm version][accordion size bundle]][accordion size link] |
| [`@zendeskgarden/container-breadcrumb`](packages/breadcrumb) | [![npm version][breadcrumb npm version]][breadcrumb npm link] | [![npm version][breadcrumb size bundle]][breadcrumb size link] |
| [`@zendeskgarden/container-combobox`](packages/combobox) | [![npm version][combobox npm version]][combobox npm link] | [![npm version][combobox size bundle]][combobox size link] |
| [`@zendeskgarden/container-field`](packages/field) | [![npm version][field npm version]][field npm link] | [![npm version][field size bundle]][field size link] |
| [`@zendeskgarden/container-focusjail`](packages/focusjail) | [![npm version][focusjail npm version]][focusjail npm link] | [![npm version][focusjail size bundle]][focusjail size link] |
| [`@zendeskgarden/container-focusvisible`](packages/focusvisible) | [![npm version][focusvisible npm version]][focusvisible npm link] | [![npm version][focusvisible size bundle]][focusvisible size link] |
| [`@zendeskgarden/container-grid`](packages/grid) | [![npm version][grid npm version]][grid npm link] | [![npm version][grid size bundle]][grid size link] |
| [`@zendeskgarden/container-keyboardfocus`](packages/keyboardfocus) | [![npm version][keyboardfocus npm version]][keyboardfocus npm link] | [![npm version][keyboardfocus size bundle]][keyboardfocus size link] |
| [`@zendeskgarden/container-menu`](packages/menu) | [![npm version][menu npm version]][menu npm link] | [![npm version][menu size bundle]][menu size link] |
| [`@zendeskgarden/container-modal`](packages/modal) | [![npm version][modal npm version]][modal npm link] | [![npm version][modal size bundle]][modal size link] |
| [`@zendeskgarden/container-schedule`](packages/schedule) | [![npm version][schedule npm version]][schedule npm link] | [![npm version][schedule size bundle]][schedule size link] |
| [`@zendeskgarden/container-scrollregion`](packages/scrollregion) | [![npm version][scrollregion npm version]][scrollregion npm link] | [![npm version][scrollregion size bundle]][scrollregion size link] |
| [`@zendeskgarden/container-selection`](packages/selection) | [![npm version][selection npm version]][selection npm link] | [![npm version][selection size bundle]][selection size link] |
| [`@zendeskgarden/container-slider`](packages/slider) | [![npm version][slider npm version]][slider npm link] | [![npm version][slider size bundle]][slider size link] |
| [`@zendeskgarden/container-splitter`](packages/splitter) | [![npm version][splitter npm version]][splitter npm link] | [![npm version][splitter size bundle]][splitter size link] |
| [`@zendeskgarden/container-tabs`](packages/tabs) | [![npm version][tabs npm version]][tabs npm link] | [![npm version][tabs size bundle]][tabs size link] |
| [`@zendeskgarden/container-tooltip`](packages/tooltip) | [![npm version][tooltip npm version]][tooltip npm link] | [![npm version][tooltip size bundle]][tooltip size link] |
| [`@zendeskgarden/container-utilities`](packages/utilities) | [![npm version][utilities npm version]][utilities npm link] | [![npm version][utilities size bundle]][utilities size link] |
[accordion npm version]: https://flat.badgen.net/npm/v/@zendeskgarden/container-accordion
[accordion npm link]: https://www.npmjs.com/package/@zendeskgarden/container-accordion
[accordion size bundle]: https://flat.badgen.net/bundlephobia/minzip/@zendeskgarden/container-accordion
[accordion size link]: https://bundlephobia.com/result?p=@zendeskgarden/container-accordion
[breadcrumb npm version]: https://flat.badgen.net/npm/v/@zendeskgarden/container-breadcrumb
[breadcrumb npm link]: https://www.npmjs.com/package/@zendeskgarden/container-breadcrumb
[breadcrumb size bundle]: https://flat.badgen.net/bundlephobia/minzip/@zendeskgarden/container-breadcrumb
[breadcrumb size link]: https://bundlephobia.com/result?p=@zendeskgarden/container-breadcrumb
[combobox npm version]: https://flat.badgen.net/npm/v/@zendeskgarden/container-combobox
[combobox npm link]: https://www.npmjs.com/package/@zendeskgarden/container-combobox
[combobox size bundle]: https://flat.badgen.net/bundlephobia/minzip/@zendeskgarden/container-combobox
[combobox size link]: https://bundlephobia.com/result?p=@zendeskgarden/container-combobox
[field npm version]: https://flat.badgen.net/npm/v/@zendeskgarden/container-field
[field npm link]: https://www.npmjs.com/package/@zendeskgarden/container-field
[field size bundle]: https://flat.badgen.net/bundlephobia/minzip/@zendeskgarden/container-field
[field size link]: https://bundlephobia.com/result?p=@zendeskgarden/container-field
[focusjail npm version]: https://flat.badgen.net/npm/v/@zendeskgarden/container-focusjail
[focusjail npm link]: https://www.npmjs.com/package/@zendeskgarden/container-focusjail
[focusjail size bundle]: https://flat.badgen.net/bundlephobia/minzip/@zendeskgarden/container-focusjail
[focusjail size link]: https://bundlephobia.com/result?p=@zendeskgarden/container-focusjail
[focusvisible npm version]: https://flat.badgen.net/npm/v/@zendeskgarden/container-focusvisible
[focusvisible npm link]: https://www.npmjs.com/package/@zendeskgarden/container-focusvisible
[focusvisible size bundle]: https://flat.badgen.net/bundlephobia/minzip/@zendeskgarden/container-focusvisible
[focusvisible size link]: https://bundlephobia.com/result?p=@zendeskgarden/container-focusvisible
[grid npm version]: https://flat.badgen.net/npm/v/@zendeskgarden/container-grid
[grid npm link]: https://www.npmjs.com/package/@zendeskgarden/container-grid
[grid size bundle]: https://flat.badgen.net/bundlephobia/minzip/@zendeskgarden/container-grid
[grid size link]: https://bundlephobia.com/result?p=@zendeskgarden/container-grid
[keyboardfocus npm version]: https://flat.badgen.net/npm/v/@zendeskgarden/container-keyboardfocus
[keyboardfocus npm link]: https://www.npmjs.com/package/@zendeskgarden/container-keyboardfocus
[keyboardfocus size bundle]: https://flat.badgen.net/bundlephobia/minzip/@zendeskgarden/container-keyboardfocus
[keyboardfocus size link]: https://bundlephobia.com/result?p=@zendeskgarden/container-keyboardfocus
[menu npm version]: https://flat.badgen.net/npm/v/@zendeskgarden/container-menu
[menu npm link]: https://www.npmjs.com/package/@zendeskgarden/container-menu
[menu size bundle]: https://flat.badgen.net/bundlephobia/minzip/@zendeskgarden/container-menu
[menu size link]: https://bundlephobia.com/result?p=@zendeskgarden/container-menu
[modal npm version]: https://flat.badgen.net/npm/v/@zendeskgarden/container-modal
[modal npm link]: https://www.npmjs.com/package/@zendeskgarden/container-modal
[modal size bundle]: https://flat.badgen.net/bundlephobia/minzip/@zendeskgarden/container-modal
[modal size link]: https://bundlephobia.com/result?p=@zendeskgarden/container-modal
[schedule npm version]: https://flat.badgen.net/npm/v/@zendeskgarden/container-schedule
[schedule npm link]: https://www.npmjs.com/package/@zendeskgarden/container-schedule
[schedule size bundle]: https://flat.badgen.net/bundlephobia/minzip/@zendeskgarden/container-schedule
[schedule size link]: https://bundlephobia.com/result?p=@zendeskgarden/container-schedule
[scrollregion npm version]: https://flat.badgen.net/npm/v/@zendeskgarden/container-scrollregion
[scrollregion npm link]: https://www.npmjs.com/package/@zendeskgarden/container-scrollregion
[scrollregion size bundle]: https://flat.badgen.net/bundlephobia/minzip/@zendeskgarden/container-scrollregion
[scrollregion size link]: https://bundlephobia.com/result?p=@zendeskgarden/container-scrollregion
[selection npm version]: https://flat.badgen.net/npm/v/@zendeskgarden/container-selection
[selection npm link]: https://www.npmjs.com/package/@zendeskgarden/container-selection
[selection size bundle]: https://flat.badgen.net/bundlephobia/minzip/@zendeskgarden/container-selection
[selection size link]: https://bundlephobia.com/result?p=@zendeskgarden/container-selection
[slider npm version]: https://flat.badgen.net/npm/v/@zendeskgarden/container-slider
[slider npm link]: https://www.npmjs.com/package/@zendeskgarden/container-slider
[slider size bundle]: https://flat.badgen.net/bundlephobia/minzip/@zendeskgarden/container-slider
[slider size link]: https://bundlephobia.com/result?p=@zendeskgarden/container-slider
[splitter npm version]: https://flat.badgen.net/npm/v/@zendeskgarden/container-splitter
[splitter npm link]: https://www.npmjs.com/package/@zendeskgarden/container-splitter
[splitter size bundle]: https://flat.badgen.net/bundlephobia/minzip/@zendeskgarden/container-splitter
[splitter size link]: https://bundlephobia.com/result?p=@zendeskgarden/container-splitter
[tabs npm version]: https://flat.badgen.net/npm/v/@zendeskgarden/container-tabs
[tabs npm link]: https://www.npmjs.com/package/@zendeskgarden/container-tabs
[tabs size bundle]: https://flat.badgen.net/bundlephobia/minzip/@zendeskgarden/container-tabs
[tabs size link]: https://bundlephobia.com/result?p=@zendeskgarden/container-tabs
[tooltip npm version]: https://flat.badgen.net/npm/v/@zendeskgarden/container-tooltip
[tooltip npm link]: https://www.npmjs.com/package/@zendeskgarden/container-tooltip
[tooltip size bundle]: https://flat.badgen.net/bundlephobia/minzip/@zendeskgarden/container-tooltip
[tooltip size link]: https://bundlephobia.com/result?p=@zendeskgarden/container-tooltip
[utilities npm version]: https://flat.badgen.net/npm/v/@zendeskgarden/container-utilities
[utilities npm link]: https://www.npmjs.com/package/@zendeskgarden/container-utilities
[utilities size bundle]: https://flat.badgen.net/bundlephobia/minzip/@zendeskgarden/container-utilities
[utilities size link]: https://bundlephobia.com/result?p=@zendeskgarden/container-utilities
## Usage
Packages are easily consumable with [create-react-app](https://github.com/facebook/create-react-app)
and standard webpack configs.
All packages follow a similar installation process. Below is an example of
consuming the [container-schedule](https://www.npmjs.com/package/@zendeskgarden/container-schedule)
package.
### Install dependencies
```sh
# Install garden package
npm install @zendeskgarden/container-schedule
```
### Using as a hook
```jsx
import React from 'react';
import { render } from 'react-dom';
/** Consume throughout app */
import { useSchedule } from '@zendeskgarden/container-schedule';
const App = () => {
const elapsed = useSchedule({ duration: 1000 });
const x = 900;
const styles = {
transform: translateX(`${900 * elapsed}px`)
};
return
;
};
render(, document.getElementById('root'));
```
### Using as a render prop container
```jsx
import React, { Component } from 'react';
import { render } from 'react-dom';
/** Consume throughout app */
import { ScheduleContainer } from '@zendeskgarden/container-schedule';
class App extends Component {
render() {
return (
{elapsed => {
const x = 900;
const styles = {
transform: translateX(`${900 * elapsed}px`)
};
return
;
}}
);
}
}
render(, document.getElementById('root'));
```
## Contribution
Thanks for your interest in Garden! Community involvement helps make our
design system fresh and tasty for everyone.
Got issues with what you find here? Please feel free to create an
[issue](https://github.com/zendeskgarden/react-containers/issues/new).
If you'd like to take a crack at making some changes, please follow our
[contributing](.github/CONTRIBUTING.md) documentation for details
needed to submit a PR.
Community behavior is benevolently ruled by a [code of
conduct](.github/CODE_OF_CONDUCT.md). Please participate accordingly.
## License
Copyright 2021 Zendesk
Licensed under the [Apache License, Version 2.0](LICENSE.md)