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.

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(() => () => inst.open(), [instance]);
    return (
        <div>
            <Datepicker ref={setInstance} />
		    <button onClick={openPicker}>Open Datepicker<button>
        </div>
    );
}

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
    setMyTheme('material');
  }, []);

  return <div>
    <Scroller theme={myTheme} />
    <button onClick={changeTheme}>Change theme</button>
  </div>;
};