npm.io
0.0.1 • Published 7 years ago

dwcarousel

Licence
MIT
Version
0.0.1
Deps
3
Size
425 kB
Vulns
0
Weekly
0
DeprecatedThis package is deprecated
SummaryDependencyVersions

DWcarousel

Description

A carrosel container component.

Props
Name Type Required Default value Description
DWcarousel.Page React.Node true - A component that will be rendered the pages DWcarousel
children React.Node false null A component that will be rendered inside the DWcarousel.Page.
initialPage Integer false 0 Set a initial page
hideIndicators Boolean false false Set to true to hide the indicators
indicatorColor String false #FFFFFF Active indicator color
indicatorSize Float false 30 Indicator bullet size
indicatorSpace Float false 15 Space between each indicator
inactiveIndicatorColor String false #DDDDDD Inactive indicator color
indicatorAtBottom Boolean false true Set to false to show the indicators at the top
indicatorOffset Float false 0 Indicator relative position from top or bottom
inactiveIndicatorText String false '•' Inactive indicator content ( You can customize to use any Unicode character )
indicatorText String false '•' Active indicator content ( You can customize to use any Unicode character )
animate Boolean false false Enable carousel autoplay
delay Integer false 1000 Set Animation delay between slides
loop Boolean false false Allow infinite looped animation. Depends on Prop {...animate} set to true.
containerStyle TStyle false {} Style container - component BBCarrosel
pageStyle TStyle false {} Style container - component DWcarousel.Page
Usage example
  ...

  render() {
    ...
    return (
      <DWcarousel
        indicatorColor="red"
      >
        <DWcarousel.Page>
          <View>
            <Text>Content 1 - Page 1</Text>
          </View>
          <View>
            <Text>Content 2 - Page 1</Text>
          </View>
        </DWcarousel.Page>
        <DWcarousel.Page>
          <View>
            <Text>Content 1 - Page 2</Text>
          </View>
          <View>
            <Text>Content 2 - Page 2</Text>
          </View>
        </DWcarousel.Page>
      </DWcarousel>
    )
  ...

Keywords

carouselreact-nativereact