React-slick: Add dotsActiveClass

[suhaotian]

it's useful in css module

[akiran]

slick-active class is already added to active dot.
You can use that for styling

[mmazzarolo]

Hi @akiran, I think that what @suhaotian wanted to achieve was adding a a prop dotActiveClass to the repo, because currently if you use css-modules you can't target the slick-active classname easily (with css-modules the classnames are hashed and you can't reference them directly).
Would a PR for this feature be accepted?
Otherwise, let me know if you know any way to get around this issue easily.

[akiran]

There are other classes as well which are added by slick. I am not sure if it is a good idea to add a new prop each one of them.

I will think about clean way to support css-modules and get back to you.

[mmazzarolo]

That's a good point.
Thank you for re-opening the issue and for the fast answer.

[sunnyvempati]

+1 to this.

[sunnyvempati]

@suhaotian did you come up with a solution for this or a workaround? @mmazzarolo ?

[amerllica]

Two years past but and simple prop activeClassName not added to project, big shame.

[flavioribeirojr]

I've written an workaround for this. If you need to use css modules you can create new React elements based on the dots provided on the appendDots callback:

function CustomDots(dots) {
  const customDots = dots
    .map(dot =>
      React
        .createElement(
          dot.type,
          {
             ...dot.props,
             className: dot.props.className === 'slick-active' ? styles.slickActive : ''
          },
          dot.props.children
      ))

      return (
        <ul> { customDots } </ul>
      )
}