Mobiscroll Instance

When a mobiscroll component is initialized, an instance of the component is created. Through the instance you have access to all methods and properties of the component.

There are multiple ways to access the instance of an individual component.

1. Inside events

The mobiscroll instance is passed as parameter for every event of the component.

Sample usage
function App() {
    const selectionDone = (ev, inst) => {
        const selectedDate = inst.getVal(); // Call the getVal method
    return <Datepicker onClose={selectionDone} />

2. Using the 'ref' attribute

The mobiscroll instance can be referenced adding a ref prop to the component:

function App() {
	const [instance, setInstance] = React.useState(null);
    const openPicker = React.useMemo(() => () =>, [instance]);
    return (
            <Datepicker ref={setInstance} />
		    <button onClick={openPicker}>Open Datepicker<button>

Setting options dynamically

To make an option dynamic, you can pass a variable as option value. Whenever the value of the variable changes, the component will be re-rendered.

const App = () => {
  const [myTheme, setMyTheme] = useState('ios');

  const changeTheme = useCallback(() => {
    // Changes the theme to Material
  }, []);

  return <div>
    <Scroller theme={myTheme} />
    <button onClick={changeTheme}>Change theme</button>
For performance reasons on re-render we compare prop values by reference. This means, that in case of options, which accept complex data structures, like arrays or objects, changes made inside the array or object won't be detected. To ensure the change is detected, always pass a new array or object reference.