### Install Dependencies

Source: https://github.com/raxjs/rax-components/blob/master/README.md

Installs the necessary dependencies for the rax-components project by navigating to the project root and running npm install.

```bash
cd rax-components/
npm install
```

--------------------------------

### Develop a Specific Package

Source: https://github.com/raxjs/rax-components/blob/master/README.md

Details the steps to develop a single package, such as rax-text. This involves navigating to the package directory, installing its dependencies, and starting the development server or building the package.

```bash
cd packages/rax-text
npm install
npm start

npm run build
```

--------------------------------

### Install rax-portal

Source: https://github.com/raxjs/rax-components/blob/master/packages/rax-portal/README.md

Installs the rax-portal package using npm.

```bash
$ npm install rax-portal --save
```

--------------------------------

### Install Rax Video

Source: https://github.com/raxjs/rax-components/blob/master/packages/rax-video/README.md

Installs the rax-video component using npm.

```bash
$ npm install rax-video --save
```

--------------------------------

### Install rax-embed

Source: https://github.com/raxjs/rax-components/blob/master/packages/rax-embed/README.md

Installs the rax-embed package using npm. This is the first step to using the component in your project.

```bash
$ npm install rax-embed --save
```

--------------------------------

### Install rax-xslider

Source: https://github.com/raxjs/rax-components/blob/master/packages/rax-xslider/README.md

Installs the rax-xslider package using npm.

```bash
$ npm install rax-xslider --save
```

--------------------------------

### Install rax-qrcode

Source: https://github.com/raxjs/rax-components/blob/master/packages/rax-qrcode/README.md

This snippet shows the command to install the rax-qrcode package using npm.

```bash
$ npm install rax-qrcode --save
```

--------------------------------

### Rax Slider Usage Example

Source: https://github.com/raxjs/rax-components/blob/master/packages/rax-slider/README.md

A complete example demonstrating how to use the Rax Slider component. It includes setting up the Slider with various properties like 'autoPlay', 'loop', 'showsPagination', and handling the 'onChange' event. It also shows how to use the 'slideTo' method via a ref.

```jsx
import { createElement, Component, render, createRef } from 'rax';
import View from 'rax-view';
import Image from 'rax-image';
import Slider from 'rax-slider';
import DriverUniversal from 'driver-universal';

class App extends Component {
  constructor(props) {
    super(props);

    this.inputRef = createRef();
  }

  onchange = (index) => {
    console.log('change', index);
  };

  onClick = () => {
    this.inputRef.current.slideTo(0);
  };

  render() {
    return (
      <View>
        <Slider
          className="slider"
          width="750"
          height="500"
          style={styles.slider}
          autoPlay={true}
          loop={true}
          showsPagination={true}
          paginationStyle={styles.paginationStyle}
          autoplayTimeout={3000}
          onChange={this.onchange}
          ref={this.inputRef}
        >
          <Slider.Item>
            <View style={styles.itemWrap}>
              <Image
                style={styles.image}
                source={{
                  height: 500,
                  width: 375,
                  uri: '//gw.alicdn.com/tfs/TB19NbqKFXXXXXLXVXXXXXXXXXX-750-500.png',
                }}
              />
            </View>
          </Slider.Item>
          <Slider.Item>
            <View style={styles.itemWrap}>
              <Image
                style={styles.image}
                source={{
                  height: 500,
                  width: 375,
                  uri: '//gw.alicdn.com/tfs/TB1tWYBKFXXXXatXpXXXXXXXXXX-750-500.png',
                }}
              />
            </View>
          </Slider.Item>
          <Slider.Item>
            <View style={styles.itemWrap}>
              <Image
                style={styles.image}
                source={{
                  height: 500,
                  width: 375,
                  uri: '//gw.alicdn.com/tfs/TB1SX_vKFXXXXbyXFXXXXXXXXXX-750-500.png',
                }}
              />
            </View>
          </Slider.Item>
        </Slider>

        <View onClick={this.onClick}>Click</View>
      </View>
    );
  }
}

const styles = {
  slider: {
    width: 750,
    position: 'relative',
    overflow: 'hidden',
    height: 500,
    backgroundColor: '#cccccc',
  },
  itemWrap: {
    width: 750,
    height: 500,
  },
  image: {
    width: 750,
    height: 500,
  },
  button: {
    marginTop: 20,
    width: 340,
    height: 80,
  },
  paginationStyle: {
    position: 'absolute',
    width: 750,
    height: 40,
    bottom: 20,
    left: 0,
    itemColor: 'rgba(255, 255, 255, 0.5)',
    itemSelectedColor: 'rgb(255, 80, 0)',
    itemSize: 16,
  },
};

render(<App />, document.body, { driver: DriverUniversal });

```

--------------------------------

### Install Rax Tab Panel

Source: https://github.com/raxjs/rax-components/blob/master/packages/rax-tab-panel/README_CN.md

This snippet shows how to install the Rax Tab Panel component using npm. It is a standard npm installation command.

```bash
$ npm install rax-tab-panel --save
```

--------------------------------

### Install rax-textinput

Source: https://github.com/raxjs/rax-components/blob/master/packages/rax-textinput/README.md

This snippet shows how to install the rax-textinput package using npm.

```bash
$ npm install rax-textinput --save
```

--------------------------------

### Install rax-barcode

Source: https://github.com/raxjs/rax-components/blob/master/packages/rax-barcode/README.md

This snippet shows how to install the rax-barcode package using npm.

```bash
$ npm install rax-barcode --save
```

--------------------------------

### Install rax-recyclerview

Source: https://github.com/raxjs/rax-components/blob/master/packages/rax-recyclerview/README.md

Provides the command to install the rax-recyclerview package using npm.

```bash
npm install rax-recyclerview --save
```

--------------------------------

### Install rax-swiper

Source: https://github.com/raxjs/rax-components/blob/master/packages/rax-swiper/README.md

Installs the rax-swiper package using npm.

```bash
$ npm install rax-swiper --save
```

--------------------------------

### Install rax-gesture-view

Source: https://github.com/raxjs/rax-components/blob/master/packages/rax-gesture-view/README.md

This snippet shows the command to install the rax-gesture-view package using npm.

```bash
$ npm install rax-gesture-view --save
```

--------------------------------

### Install rax-slider

Source: https://github.com/raxjs/rax-components/blob/master/packages/rax-slider/README.md

This snippet shows how to install the rax-slider package using npm.

```bash
$ npm install rax-slider --save
```

--------------------------------

### Install rax-view

Source: https://github.com/raxjs/rax-components/blob/master/packages/rax-view/README.md

This snippet shows the command to install the rax-view package using npm.

```bash
$ npm install rax-view --save
```

--------------------------------

### Basic Video Playback Example

Source: https://github.com/raxjs/rax-components/blob/master/packages/rax-video/README.md

A simple example demonstrating how to use the Rax Video component to play a video. It includes importing necessary modules and rendering a Video component with a source URL and basic styling.

```jsx
import { createElement, render } from 'rax';
import Video from 'rax-video';
import DriverUniversal from 'driver-universal';

function VideoDemo() {
  return (
    <Video
      src="https://cloud.video.taobao.com/play/u/2780279213/p/1/e/6/t/1/d/ld/36255062.mp4"
      style={{ width: 750, height: 400 }}
      autoPlay
    />
  );
}

render(<VideoDemo />, document.body, { driver: DriverUniversal });
```

--------------------------------

### Run Tests

Source: https://github.com/raxjs/rax-components/blob/master/README.md

Explains how to execute tests for all packages or for a specific package within the rax-components project.

```bash
npm run test
npm run test -- packages/rax-countdown
```

--------------------------------

### Rax Component Usage Example

Source: https://github.com/raxjs/rax-components/blob/master/packages/rax-view/README.md

A complete React JSX example demonstrating the usage of Rax components, including nested Views with click handlers and inline styles. It shows how to import necessary modules and render the component.

```jsx
import { createElement, useRef, useEffect, render } from "rax";
import DU from "driver-universal";
import View from "rax-view";

const App = () => {
  const viewRef = useRef(null);
  useEffect(() => {});
  return (
    <View
      ref={viewRef}
      style={{
        padding: '30rpx'
      }}
      onClick={() => {
        alert("container was clicked!");
      }}
    >
      <View
        style={{
          width: '300rpx',
          height: '300rpx',
          backgroundColor: "red"
        }}
        onClick={e => {
          e.stopPropagation();
          alert("red was clicked");
        }}
      />
      <View
        style={{
          width: '300rpx',
          height: '300rpx',
          backgroundColor: "green",
          position: "absolute",
          top: '20rpx',
          left: '20rpx'
        }}
        onClick={() => {
          alert("green was clicked");
        }}
      />
      <View
        style={{
          width: '300rpx',
          height: '300rpx',
          backgroundColor: "yellow",
          position: "absolute",
          top: '80rpx',
          left: '210rpx'
        }}
        onClick={e => {}}
      />
    </View>
  );
};

render(<App />, document.body, { driver: DU });
```

--------------------------------

### Install Rax Text

Source: https://github.com/raxjs/rax-components/blob/master/packages/rax-text/README.md

Installs the rax-text package using npm. This is the first step to using the Text component in your Rax project.

```bash
$ npm install rax-text --save
```

--------------------------------

### Install rax-refreshcontrol

Source: https://github.com/raxjs/rax-components/blob/master/packages/rax-refreshcontrol/README.md

This snippet shows how to install the rax-refreshcontrol package using npm.

```bash
$ npm install rax-refreshcontrol --save
```

--------------------------------

### Install Rax Icon

Source: https://github.com/raxjs/rax-components/blob/master/packages/rax-icon/README.md

Command to install the rax-icon package using npm.

```bash
$ npm install rax-icon --save
```

--------------------------------

### Install rax-link

Source: https://github.com/raxjs/rax-components/blob/master/packages/rax-link/README.md

This command installs the rax-link package using npm. It is a prerequisite for using the rax-link component in your project.

```bash
$ npm install rax-link --save
```

--------------------------------

### Rax GestureView Example

Source: https://github.com/raxjs/rax-components/blob/master/packages/rax-gesture-view/README.md

An example demonstrating how to use the GestureView component in a Rax application. It includes setting up event handlers for horizontal and vertical pans and rendering the GestureView with basic styling.

```javascript
/** @jsx createElement */
import {createElement, Component, render} from 'rax';
import GestureView from '../src/index';
import View from 'rax-view';
import { isWeex } from 'universal-env';
import * as DriverDOM from 'driver-dom';
import * as DriverWeex from 'driver-weex';

class App extends Component {
  onHorizontalPan = (e) => {
    console.error('onHorizontalPan:' + e.state);
  }

  onVerticalPan = (e) => {
    console.error('onVerticalPan:' + e.state);
  }

  render() {
    return (<View style={{flex: 1}}>
      <GestureView style={{width: 300, height: 300, backgroundColor: 'red'}}
        onVerticalPan={this.onVerticalPan}
        onHorizontalPan={this.onHorizontalPan}
      >pan me</GestureView>
    </View>);
  }
}

render(<App />, document.body, { driver: isWeex ? DriverWeex : DriverDOM });
```

--------------------------------

### Basic Rax Slider Example

Source: https://github.com/raxjs/rax-components/blob/master/packages/rax-slider/demo/index.md

This snippet demonstrates the core functionality of the Rax Slider component. It includes setting up the slider with images, configuring autoplay, looping, pagination, and handling slide changes. The example also shows how to control the slider programmatically using refs.

```jsx
/* eslint-disable import/no-extraneous-dependencies */
import { createElement, Component, render, createRef } from 'rax';
import View from 'rax-view';
import Image from 'rax-image';
import Slider from '../src/index';
import DU from 'driver-universal';
import './index.css';

class App extends Component {
  constructor(props) {
    super(props);
    this.inputRef = createRef();
    this.state = {
      data: [],
    };
  }

  componentDidMount() {
    this.setState({
      data: [
        // 红蓝灰
        '//gw.alicdn.com/tfs/TB19NbqKFXXXXXLXVXXXXXXXXXX-750-500.png',
        '//gw.alicdn.com/tfs/TB1tWYBKFXXXXatXpXXXXXXXXXX-750-500.png',
        '//gw.alicdn.com/tfs/TB1SX_vKFXXXXbyXFXXXXXXXXXX-750-500.png'
      ]
    });
  }

  onchange = (e) => {
    console.log('change', e);
  }

  onClick = (direction) => {
    if (direction === 'go(0)') {
      this.inputRef.current.slideTo(0);
    } else {
      this.inputRef.current.slideTo(this.inputRef.current.index + (direction === 'prev' ? -1 : 1));
    }
  }

  render() {
    return (
      <View>
        <Slider
          className="slider"
          width={750}
          height={500}
          autoPlay={true}
          index={2}
          loop={true}
          speed={300}
          cssEase="linear"
          showsPagination={true}
          paginationStyle={{
            position: 'absolute',
            width: '750rpx',
            height: '40rpx',
            bottom: '20rpx',
            left: 0,
            itemColor: 'rgba(255, 255, 255, 0.5)',
            itemSelectedColor: 'rgb(255, 80, 0)',
            itemSize: '16rpx'
          }}
          autoplayInterval={2000}
          onChange={this.onchange}
          ref={this.inputRef}
        >
          {this.state.data.map((item, index) => (
            <View key={item} className="itemWrap">
              <p className="text">index: {index}</p>
              <Image className="image" source={{ uri: item }} />
            </View>))}
        </Slider>
        <View style={{
          flexDirection: 'row',
          justifyContent: 'space-around',
        }}>
          <View onClick={this.onClick.bind(this, 'prev')}>prev</View>
          <View onClick={this.onClick.bind(this, 'next')}>next</View>
          <View onClick={this.onClick.bind(this, 'go(0)')}>go(0)</View>
        </View>
      </View>
    );
  }
}

render(<App />, document.body, { driver: DU });

```

--------------------------------

### Install rax-modal

Source: https://github.com/raxjs/rax-components/blob/master/packages/rax-modal/README.md

Installs the rax-modal package using npm. This is a prerequisite for using the modal component in your Rax project.

```bash
$ npm install rax-modal --save
```

--------------------------------

### Rax Modal Usage Example

Source: https://github.com/raxjs/rax-components/blob/master/packages/rax-modal/README.md

Demonstrates how to use the Rax Modal component to display a modal dialog. It includes state management for visibility and event handlers for user interactions. This example requires the `rax-modal` and `rax` libraries.

```jsx
import { createElement, Component, render } from 'rax';
import Modal from 'rax-modal';

const Demo = props => {
  const [visible, setVisible] = useState(false);
  return [
    <View onClick={() => setVisible(true)}>
      <Text>open</Text>
    </View>,
    <Modal
      visible={visible}
      onHide={() => {
        console.log('hide');
      }}
      onShow={() => {
        console.log('show');
      }}
      onMaskClick={() => {
        setVisible(false);
      }}
      contentStyle={{
        position: 'absolute',
        top: '150rpx',
        width: '400rpx',
        left: '175rpx',
      }}
    >
      <Text>这里是弹窗内容</Text>
    </Modal>,
  ];
};

render(<Demo />);
```

--------------------------------

### Initialize Rax Tab Panel

Source: https://github.com/raxjs/rax-components/blob/master/packages/rax-tab-panel/README.md

Demonstrates the basic initialization of the rax-tab-panel component.

```javascript
import { createElement, Component } from 'rax';
import View from 'rax-view';
import Text from 'rax-text';
import TabPanel from 'rax-tab-panel';

class App extends Component {
  render() {
    return (
      <TabPanel>
        <TabPanel.Item title="Tab 1">
          <View><Text>Content for Tab 1</Text></View>
        </TabPanel.Item>
        <TabPanel.Item title="Tab 2">
          <View><Text>Content for Tab 2</Text></View>
        </TabPanel.Item>
      </TabPanel>
    );
  }
}

export default App;
```

--------------------------------

### Install rax-parallax

Source: https://github.com/raxjs/rax-components/blob/master/packages/rax-parallax/README.md

This command installs the rax-parallax package using npm. Ensure you have Node.js and npm installed to use this command.

```bash
npm install --save rax-parallax
```

--------------------------------

### Basic Usage of rax-view

Source: https://github.com/raxjs/rax-components/blob/master/packages/rax-view/README.md

Example demonstrating the basic usage of the rax-view component in a Rax application. It shows how to import and render the View component.

```javascript
import View from 'rax-view';

// In your Rax component:
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
  {/* Content inside the View */}
</View>
```

--------------------------------

### Basic QRCode Usage

Source: https://github.com/raxjs/rax-components/blob/master/packages/rax-qrcode/demo/index.md

This snippet illustrates the fundamental way to use the QRCode component. It imports necessary modules from 'rax' and 'driver-universal', defines a simple App component that renders the QRCode with a specified data URL and styles, and then mounts the App to the document body using the universal driver.

```jsx
/* eslint-disable import/no-extraneous-dependencies */
import { createElement, render } from 'rax';
import DriverUniversal from 'driver-universal';
import QRCode from '../src/index';

function App() {
  return (
    <QRCode
      data="http://market.m.taobao.com/apps/market/m-vip/88-festival.html?wh_weex=true&wx_navbar_transparent=true"
      style={{ width: 400, height: 400 }}
    />
  );
}

render(<App />, document.body, { driver: DriverUniversal });

```

--------------------------------

### Basic Usage of rax-barcode

Source: https://github.com/raxjs/rax-components/blob/master/packages/rax-barcode/README.md

This example demonstrates how to use the BarCode component in a Rax application. It includes importing necessary modules, rendering the BarCode component with data and options, and setting up the Rax application.

```javascript
import { createElement, render, Component } from "rax";
import DriverUniversal from "driver-universal";
import View from "rax-view";
import BarCode from "rax-barcode";

class App extends Component {
  constructor() {
    super();
  }

  render() {
    return (
      <View style={{ flex: 1 }}>
        <BarCode
          data={"123456789"}
          options={{
            fillColor: "red"
          }}
        />
      </View>
    );
  }
}

render(<App />, document.body, { driver: DriverUniversal });
```

--------------------------------

### Basic Usage of rax-link

Source: https://github.com/raxjs/rax-components/blob/master/packages/rax-link/README.md

This example demonstrates the basic usage of the rax-link component. It shows how to import the necessary components, render a Link with an href and miniappHref, and attach an onClick event handler. The Link component wraps a Text component to display clickable text.

```jsx
import { createElement, render } from 'rax';
import DriverUniversal from 'driver-universal';
import Link from 'rax-link';
import Text from 'rax-text';

render(
  <Link
    href={'//www.taobao.com'}
    miniappHref={'/pages/Home/index'}
    onClick={e => {
      console.log(e);
    }}
  >
    <Text
      style={{
        fontSize: 14,
        color: '#333333',
      }}
    >
      点击跳转
    </Text>
  </Link>,
  document.body,
  { driver: DriverUniversal },
);
```

--------------------------------

### Install rax-scrollview

Source: https://github.com/raxjs/rax-components/blob/master/packages/rax-scrollview/README.md

This snippet shows how to install the rax-scrollview package using npm.

```bash
$ npm install rax-scrollview --save
```

--------------------------------

### Build Packages

Source: https://github.com/raxjs/rax-components/blob/master/README.md

Provides commands to build all packages in the project or specific packages. The `--packages` flag allows for selective building.

```bash
npm run build # build all packages
npm run build -- --packages=rax-text,rax-view
```

--------------------------------

### Install rax-waterfall

Source: https://github.com/raxjs/rax-components/blob/master/packages/rax-waterfall/README.md

This code snippet shows how to install the rax-waterfall package using npm.

```bash
$ npm install rax-waterfall --save
```

--------------------------------

### Basic Usage of rax-embed

Source: https://github.com/raxjs/rax-components/blob/master/packages/rax-embed/README.md

Demonstrates how to use the Embed component with a specified source URL and URL parameters. It also shows how to apply styles and use the `useIframeInWeb` prop.

```jsx
import { createElement, render } from 'rax';
import DriverUniversal from 'driver-universal';
import Embed from '../src/index';

const urlParam = {
  paramOne: 123,
  paramTwo: 456
};
render(<Embed urlParam={urlParam} src={'http://taobao.com'} useIframeInWeb={true} style={{
  height: '750rpx',
  width: '750rpx'
}} />, document.body, { driver: DriverUniversal });
```

--------------------------------

### Basic Slider Example

Source: https://github.com/raxjs/rax-components/blob/master/packages/rax-xslider/README.md

Demonstrates the basic usage of rax-xslider with custom styling, looping, autoplay, and programmatic control using `useEffect` to switch to a specific slide.

```jsx
/** @jsx createElement */
import {createElement, Component, render, createRef, useEffect} from 'rax';
import Text from 'rax-text';
import Slider from 'rax-xslider';

const styles = {
  item: {
    height: 400,
    backgroundColor: 'red',
    justifyContent: 'center',
    borderRadius: 24,
    borderWidth: 5,
    borderColor: '#000',
    borderStyle: 'solid'
  },
  txt: {
    color: '#fff',
    fontSize: 50,
    textAlign: 'center'
  },
  title: {
    backgroundColor: '#f7f7f7',
    color: '#444',
    textAlign: 'center',
    fontSize: 200,
    fontSize: 28,
    lineHeight: 80
  }
};

const colors = [
  'red',
  'green',
  'blue',
  'orange',
  'yellow'
];

export default function App() {
  const slider = createRef();
  const getCardTransitionSpec = () => {
    return {
      props: [
        {
          property: 'transform.scale',
          inputRange: [0, 1],
          outputRange: [0.8, 1]
        },
        {
          property: 'opacity',
          inputRange: [0, 1],
          outputRange: [.2, 1]
        }
      ]
    };
  }
  useEffect(() => {
    // use slider.current to get the instance
    slider.current.switchTo(3);
  }, []);
  return (
    <Slider
      ref={slider}
      loop={true}
      autoPlay={true}
      startGap={75}
      endGap={75}
      cardSize={600}
      cardTransitionSpec={getCardTransitionSpec}
    >
      {colors.map((color, i) => {
        return (<Slider.Panel style={{...styles.item, backgroundColor: color}} key={'panel' + i}>
          <Slider.PanView style={styles.panView}><Text style={styles.txt}>{i}</Text></Slider.Panel>
        </Slider.Panel>);
      })}
    </Slider>
  );
}

```

--------------------------------

### Rax Text Component Usage Example

Source: https://github.com/raxjs/rax-components/blob/master/packages/rax-text/README.md

Demonstrates how to use the Rax Text component with various properties like `numberOfLines`, `textOverflow`, `textDecoration`, and `lineHeight`. It also shows how to style text and mix different text elements.

```javascript
import {createElement, render, Component} from 'rax';
import DU from 'driver-universal';
import View from 'rax-view';
import Text from 'rax-text';

const styles = {
  root: {
    width: 750,
    paddingTop: 20,
  },
  container: {
    padding: 20,
    borderStyle: 'solid',
    borderColor: '#dddddd',
    borderWidth: 1,
    marginLeft: 20,
    marginRight: 20,
    marginBottom: 10,
  },
  textBlock: {
    fontWeight: '500',
    color: 'blue',
  },
  logBox: {
    padding: 20,
    margin: 10,
    borderWidth: 1,
    borderColor: '#f0f0f0',
    backgroundColor: '#f9f9f9',
  },
};

class App extends Component {
  render() {
    return (
      <View style={styles.root}>
        <View style={{...styles.container, ...{flexDirection: 'row', justifyContent: 'flex-start'}}}>
          <Text>text</Text>
          <Text style={{color: '#ff4200'}}>Mixing</Text>
        </View>

        <View style={styles.container}>
          <Text numberOfLines={1} style={{width: 300, textOverflow: 'ellipsis'}}>
          Single line of text exceeds truncated text
          </Text>

          <Text numberOfLines={2} style={{width: 300, textOverflow: 'ellipsis'}}>
          Multi-line text exceeds truncated text, exceeds truncated text, exceeds truncated text, exceeds truncated text
          </Text>
        </View>

        <View style={styles.container}>
          <Text style={{textDecoration: 'underline'}}>
          Text underline
          </Text>
          <Text style={{textDecorationLine: 'none'}}>
           no Underlined
          </Text>
          <Text style={{textDecoration: 'line-through'}}>
          Text strikethrough
          </Text>
        </View>

        <View style={styles.container}>
          <Text style={{lineHeight: '120rpx'}}>
          Line height 120rpx, multi-line text text folding effect Multi-line text text folding effect
          </Text>
        </View>

      </View>
    );
  }
}

render(<App/>, document.body, {driver: DU});

```

--------------------------------

### Install rax-countdown

Source: https://github.com/raxjs/rax-components/blob/master/packages/rax-countdown/README.md

Installs the rax-countdown package using npm. This is the standard way to add the component to your Rax project.

```bash
$ npm install rax-countdown --save
```