@zendeskgarden/container-splitter
npm i @zendeskgarden/container-splitter

@zendeskgarden/container-splitter

🌱 garden React (no-UI) containers

by zendeskgarden

0.2.3 (see all)License:Apache-2.0TypeScript:Built-In
npm i @zendeskgarden/container-splitter
Readme

Garden React Containers Build Status Dependency Status Coverage Status

🌱 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.

PackageVersionSizeDependencies
@zendeskgarden/container-accordionnpm versionnpm versionDependency Status
@zendeskgarden/container-breadcrumbnpm versionnpm versionDependency Status
@zendeskgarden/container-buttongroupnpm versionnpm versionDependency Status
@zendeskgarden/container-fieldnpm versionnpm versionDependency Status
@zendeskgarden/container-focusjailnpm versionnpm versionDependency Status
@zendeskgarden/container-focusvisiblenpm versionnpm versionDependency Status
@zendeskgarden/container-gridnpm versionnpm versionDependency Status
@zendeskgarden/container-keyboardfocusnpm versionnpm versionDependency Status
@zendeskgarden/container-modalnpm versionnpm versionDependency Status
@zendeskgarden/container-paginationnpm versionnpm versionDependency Status
@zendeskgarden/container-schedulenpm versionnpm versionDependency Status
@zendeskgarden/container-scrollregionnpm versionnpm versionDependency Status
@zendeskgarden/container-selectionnpm versionnpm versionDependency Status
@zendeskgarden/container-splitternpm versionnpm versionDependency Status
@zendeskgarden/container-tabsnpm versionnpm versionDependency Status
@zendeskgarden/container-tooltipnpm versionnpm versionDependency Status
@zendeskgarden/container-treeviewnpm versionnpm versionDependency Status
@zendeskgarden/container-utilitiesnpm versionnpm versionDependency Status

Usage

Packages are easily consumable with create-react-app and standard webpack configs.

All packages follow a similar installation process. Below is an example of consuming the container-schedule package.

Install dependencies

# Install garden package
npm install @zendeskgarden/container-schedule

Using as a hook

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 <div style={styles} />;
};

render(<App />, document.getElementById('root'));

Using as a render prop container

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 (
      <ScheduleContainer>
        {elapsed => {
          const x = 900;
          const styles = {
            transform: translateX(`${900 * elapsed}px`)
          };

          return <div style={styles} />;
        }}
      </ScheduleContainer>
    );
  }
}

render(<App />, 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.

If you'd like to take a crack at making some changes, please follow our contributing documentation for details needed to submit a PR.

Community behavior is benevolently ruled by a code of conduct. Please participate accordingly.

License

Copyright 2021 Zendesk

Licensed under the Apache License, Version 2.0

Downloads/wk

32

GitHub Stars

255

LAST COMMIT

2mos ago

MAINTAINERS

1

CONTRIBUTORS

18

OPEN ISSUES

1

OPEN PRs

0
VersionTagPublished
0.2.3
latest
16d ago
No alternatives found
No tutorials found
Add a tutorial